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Vue.js 技术 揭秘 


目前 社区 有 很 多 Vue.js 的 源码 解析 文章 ， 但 是 质量 层次 不 齐 ， 不 够 系统 和 全 面 ， 这 本 电子 书 的 目标 是 
全 方位 细致 深度 解析 Vuejs 的 实现 原理 ， 让 同学 们 可 以 彻底 掌握 Vue.js。 目 前 分 析 的 版 本 是 Vue.js 的 最 
新 版 本 Vue.js 2.5.17-beta.0， 并 且 之 后 会 随 着 版 本 升级 而 做 相应 的 更 新 ， 充 分 发 挥 电子 书 的 优势 。 


这 本 电子 书 是 作为 《Vuejs 源码 揭秘 》 视 频 课 程 的 辅助 教材 。 电 子 书 是 开源 的 ， 同 学 们 可 以 免费 阅 
读 ， 视 频 是 收费 的 ，25+ 小 时 纯 干 货 课 程 ， 如 果 有 需要 的 同学 可 以 购买 来 学 习 ， 但 请 务必 支持 正版 ， 请 


尊重 作者 的 劳动 成 果 。 


草 节 目录 
为 了 把 Vuejs 的 源码 讲 明白 ， 课 程 设计 成 由 浅 太 深 ， 分 为 核心 、 编 译 、 扩 展 、 生 态 四 个 方面 去 讲 总 
共 ， 并 拆 成 了 用 个 章节 ， 如 下 图 : 
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认识 Flow 
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第 一 章 : 准备 工作 


介绍 了 Flow、YVue.js 的 源码 目录 设计 、Vue.js 的 源码 构建 方式 ， 以 及 从 人 口 开 始 分 析 了 Vue.js 的 初始 
化 过 程 。 


第 二 章 : 数据 驱动 


详细 讲解 了 模板 数据 到 DOM 演 染 的 过 程 ， 从 new vue 开始 ， 分 析 了 
mount 、_ render 、 _ update 、 patch 等 流程 。 


第 三 章 : 组 件 化 


分 析 了 组 件 化 的 实现 原理 ， 并 且 分 析 了 组 件 周 边 的 原理 实现 ， 包 括 合并 配置 、 生 命 周期 、 组 件 注册 、 
异步 组 件 。 


第 四 章 : 深入 响应 式 原理 


详细 讲解 了 数据 的 变化 如 何 驱动 视图 的 变化 ， 分 析 了 响应 式 对 象 的 创建 ， 依 赖 收集 、 诛 发 更 新 的 实现 
过 程 ， 一 些 特殊 情况 的 处 理 ， 并 对 比 了 计算 属性 和 侦 听 属性 的 实现 ， 最 后 分 析 了 组 件 更 新 的 过 程 。 


第 五 章 : 编译 
从 编译 的 大 口 函 数 开 始 ， 分 析 了 编译 的 三 个 核心 流程 的 实现 : parse -> optimize -> codegen 。 


第 六 章 : 扩展 


详细 讲解 了 _ event 、 v-model 、 slot 、 keep-alive 、 transition 、 transition-group 等 
常用 功能 的 原理 实现 ， 该 章节 作为 一 个 可 扩展 章节 ， 未 来 会 分 析 更 多 Vue 提供 的 特性 。 


第 七 章 : Vue-Router 


分 析 了 Vue-Ronuter 的 实现 原理 ， 从 路 由 注册 开始 ， 分 析 了 路 由 对 象 、 matcher ， 并 深入 分 析 了 整个 路 
径 切换 的 实现 过 程 和 细节 。 


第 八 章 : Vuex 


分 析 了 Vuex 的 实现 原理 ， 深 入 分 析 了 它 的 初始 化 过 程 ， 常 用 API 以 及 插件 部 分 的 实现 。 


粉丝 福利 


对 于 通过 正版 渠道 购买 课程 的 同学 ， 快 来 做 我 的 粉丝 吧 ， 验 证 信息 就 是 你 们 的 订单 号 ， 感 谢 对 正版 的 
支持 ， 比 心 * 
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黄 老 师 粉 丝 群 
扫 一 扫 二 维 码 ， 加 入 群 聊 。 


准备 工作 


那么 从 这 一 章 开始 我 们 即将 分 析 Vue 的 源码 ， 我 们 将 会 介绍 一 些 前 置 知 识 如 flow、 源 码 目录 、 构 建 方 
式 、 编 译 和 人口 等 。 


除 此 之 外 ， 我 布 望 你 已 经 用 过 Vue 做 过 2 个 以 上 的 实际 项 目 ， 对 Vue 的 思想 有 了 一 定 的 了 解 ， 对 绝 大 
部 分 的 API 都 已 经 有 使 用 。 同 时 ， 我 也 要 求 你 有 一 定 的 原生 JavaScript 的 功底 ， 并 对 代码 调试 有 一 定 的 


了 解 。 


如 果 你 具备 了 以 上 条 件 ， 并 且 对 Vue 的 实现 原理 很 感 兴 趣 ， 那 么 就 可 以 开始 这 门 课 程 的 学 习 了 ， 我 将 


会 为 你 打 


[ 开 Vue 的 底 


层 世 界 大 门 ， 对 它 的 实现 细节 一 探究 竟 。 


认识 Flow 


Flow 是 facebook 出 品 的 JavaScript 静态 类 型 检查 工具 。Vue.js 的 源码 利用 了 Flow 做 了 静态 类 型 检查 ， 
所 以 了 解 Fow 有 助 于 我 们 阅读 源码 。 


为 什么 用 Flow 
JavaScript 是 动态 类 型 语言 ， 它 的 灵活 性 有 目 共 睹 ， 但 是 过 于 灵活 的 副作用 是 很 容易 就 写 出 非常 隐蔽 的 
隐患 代码 ， 在 编译 期 甚至 看 上 去 都 不 会 报错 ， 但 在 运行 阶段 就 可 能 出 现 各 种 奇怪 的 bug。 


类 型 检查 是 当前 动态 类 型 语言 的 发 展 趋势 ， 所 谓 类 型 检查 ， 就 是 在 编译 期 尽早 发 现 〈 由 类 型 错误 引起 
的 ) bug， 又 不 影响 代码 运行 〈 不 需要 运行 时 动态 检查 类 型 ) ， 使 编写 JavaScript 具有 和 编写 Java 等 强 
类 型 语言 相近 的 体验 。 


项 目 越 复杂 就 越 需要 通过 工具 的 手段 来 保证 项 目的 维护 性 和 增强 代码 的 可 读 性 。 Vue.js 在 做 2.0 重 构 的 
时 候 ， 在 ES2015 的 基础 上 ， 除 了 ESLint 保证 代码 风格 之 外 ， 也 引入 了 Flow 做 静态 类 型 检查 。 之 所 以 
选择 Flow， 主 要 是 因为 Babel 和 ESLint 都 有 对 应 的 Flow 插件 以 文 持 语法 ， 可 以 完全 治 用 现 有 的 构建 
配置 ， 非 常 小 成 本 的 改动 就 可 以 拥有 静态 类 型 检查 的 能 力 。 


Flow 的 工作 方式 

通常 类 型 检查 分 成 2 种 方式 : 

型 推断 : 通过 变量 的 使 用 上 下 文 来 推断 出 变量 类 型 ， 然 后 根据 这 些 推断 来 检查 类 型 。 
型 注释 : 事先 注释 好 我 们 期 待 的 类 型 ，Flow 会 基于 这 些 注释 来 判断 。 


。 类 
。 类 
类 型 判断 

它 不 需要 任何 代码 修改 即 可 进行 类 型 检查 ， 最 小 化 开发 者 的 工作 量 。 它 不 会 强制 你 改变 开发 习惯 ， 
为 它 会 自动 推断 出 变量 的 类 型 。 这 就 是 所 谓 的 类 型 推断 ，Flow 最 重要 的 特性 之 一 。 

通过 一 个 简单 例子 说 明 一 下 : 


/x*G@flow*/ 
funeccnrongspiaa(s Tt 大 攻 


return Str,.Ssplit('”  ) 


由 


SplLit(11) 
Flow 检查 上 述 代码 后 会 报错 ， 因 为 函数 split 期 待 的 参数 是 字符 串 ， 而 我 们 输入 了 数字 。 


如 上 所 述 ， 类 型 推断 是 Flow 最 有 用 的 特性 之 一 ， 不 需要 编写 类 型 注释 就 能 获取 有 用 的 反馈 。 但 在 某 些 
特定 的 场景 下 ， 添 加 类 型 注释 可 以 提供 更 好 更 明确 的 检查 依据 。 


考虑 如 下 代码 : 


/x*Q@f1Low*/ 


function add(x，y) 攻 
return X + y 


add( 'HeJll1o'，11) 


Flow 检查 上 述 代码 时 检查 不 出 任何 错误 ， 因 为 从 语法 层面 考虑 ， + 即 可 以 用 在 字符 串 上 ， 也 可 以 用 
在 数字 上 ， 我 们 并 没有 明确 指出 add() 的 参数 必须 为 数字 。 


在 这 种 情况 下 ， 我 们 可 以 借助 类 型 注释 来 指明 期 望 的 类 型 。 类 型 注释 是 以 冒号 : 开头 ， 可 以 在 本 数 
参数 ， 返 回 值 ， 变 量 声明 中 使 用 。 


如 果 我 们 在 上 段 代 码 中 添加 类 型 注释 ， 就 会 变 成 如 下 : 
/x*@f1ow*/ 


function add(x: number，y: number): number 攻 
[区 1 本 


和 


add('Hel1o'，11) 


现在 Flow 束 能 检查 出 错误 ， 因 为 函数 参数 的 期 竺 类 型 为 数字 ， 而 我 们 提供 了 字符 串 。 
上 面 的 例子 是 针对 西数 的 类 型 注释 。 接 下 来 我 们 来 看 看 Flow 能 支持 的 一 些 常 见 的 类 型 注释 。 


/xQ@f1Low*/ 
var arr: Array<number> = [1，2，3] 


arr.push('He1l1lo ') 


数组 类 型 注释 的 格式 是 Array<T> ， T 表示 数组 中 每 项 的 数据 类 型 。 在 上 述 代码 中 ，arr 是 每 项 均 为 
数字 的 数组 。 如 果 我 们 给 这 个 数组 添加 了 一 个 字符 串 ，Flow 能 检查 出 错误 。 


类 和 对 象 


/xQ@f1Low*/ 


Glass 瑟 Ba 


X， StFingy， // Xx 是 字符 串 


y: string | number; // y 可 以 是 字符 串 或 者 数字 
Z: boolean 


constructor(x: string，y: string | number) { 
this.X = X 
this.y = y 
this.,zZ = false 


】} 
】} 


var bar: Bar = new Bar( 'hel1o'，4) 

var obj: 1 a: string，b: number，c: Array<Sstring>，d: Bar }= 攻 
a: 'he1l1o'， 
日 于 汪 二 

Cnelliow aiworudilF 

d: new Bar( 'hel1o'，3) 


类 的 类 型 注释 格式 如 上 ， 可 以 对 类 自身 的 属性 做 类 型 检查 ， 也 可 以 对 构造 本 数 的 参数 做 类 型 检查 。 这 
里 需要 注意 的 是 ， 属 性 y 的 类 型 中 间 用 | 做 间 隅 ， 表 示 y 的 类 型 即 可 以 是 字符 串 也 可 以 是 数 


对 象 的 注释 类 型 类 似 于 类 ， 需 要 指定 对 象 属性 的 类 型 。 


若 想 任意 类 型 T 可 以 为 null 或 者 undefined ， 只 需 类 似 如 下 写成 ?T 的 格式 即 可 。 
/*@f1ow*/ 
Var foo: ?String = nul1 


此 时 ， foo 可 以 为 字符 串 ， 也 可 以 为 null 。 


目前 我 们 只 列举 了 Flow 的 一 些 营 见 的 类 型 注释 。 如 果 想 了 解 所 有 类 型 注释 ， 请 移 步 Flow 的 官方 广 


档 。 


Flow 在 Vue.js 源码 中 的 应 用 


有 时 候 我 们 想 引 用 第 三 方 库 ， 或 者 自 定义 一 些 类 型 ， 但 Flow 并 不 认识 ， 因 此 检查 的 时 候 会 报错 。 为 了 
解决 这 类 问题 ，Flow 提出 了 一 个 libdef 的 概念 ， 可 以 用 来 识别 这 些 第 三 方 库 或 者 是 自 定义 类 型 ， 
而 Vue.js 也 利用 了 这 一 特性 。 


在 Vue.js 的 主 目录 下 有 .flowconfig 文件 ， 它 是 Flow 的 配置 文件 ， 感 兴趣 的 同学 可 以 看 官方 文 
档 。 这 其 中 的 [Libs] 部 分 用 来 描述 包含 指定 库 定 义 的 目录 ， 默 认 是 名 为 flow-typed 的 目录 。 


这 里 [libs] 配置 的 是 flow ， 表 示 指 定 的 库 定 义 都 在 flow 文件 夹 内 。 我 们 打开 这 个 目录 ， 会 发 


现 文件 如 下 : 


fow 

| 一 compiler .js 
| 一 component .js 
| 一 global-api.js 
| 一 modules .js 
| 一 options .js 
FE ss <s 

| 一 vnode.js 


编译 相关 

组 件数 据 结构 

# Global API 结构 
# 第 三 方 库 定义 

# 选项 相关 

# 服务 端 泻 染 相关 


# 虚拟 node 相关 


## 
## 


可 以 看 到 ，Vuejs 有 很 多 自 定 义 类 型 的 定义 ， 在 阅读 源码 的 时 候 ， 如 果 遇 到 某 个 类 型 并 想 了 解 它 完整 的 


数据 结构 的 时 候 ， 可 以 


总 结 


回来 翻阅 这 些 数 据 结 构 的 定义 。 


通过 对 Flow 的 认识 ， 有 助 于 我 们 阅读 Vue 的 源码 ， 并 且 这 种 静 


态 类 型 检查 的 方式 非常 有 利于 大 型 项 目 


源码 的 开发 和 维护 。 类 似 Flow 的 工具 还 有 如 TypeScript， 感 兴趣 的 同学 也 可 以 自行 去 了 解 一 下 。 


Vue.js 源码 目录 设计 


Vuejs 的 源码 都 在 src 目录 下 ， 其 目录 结构 如 下 。 


src 
| 一 compiler # 编译 相关 
| 一 core # 核心 代码 
| 一 platforms # 不 同 平台 的 支持 
一 server # 服务 端 泻 染 
sfc # .Vvue 文件 解析 
一 shared # 共享 代码 
compiler 


compiler 目录 包含 Vue.js 所 有 编译 相关 的 代码 。 它 包括 把 模板 解析 成 ast 语法 树 ，ast 语法 树 优 化 ， 代 码 
生成 等 功能 。 

编译 的 工作 可 以 在 构建 时 做 〈 借 助 webpack、vue-loader 等 辅助 插件 ) ; 也 可 以 在 运行 时 做 ， 使 用 包含 
构建 功能 的 Vue.js。 显 然 ， 编 译 是 一 项 耗 性 能 的 工作 ， 所 以 更 推荐 前 者 一 离线 编译 。 


COFe 


core 目录 包含 了 Vuejjs 的 核心 代码 ， 包 括 内 置 组 件 、 全 局 API 封装 ，Vue 实例 化 、 观 察 者 、 虚 拟 
DOM、 工 有 具 酚 数 等 等 。 


这 里 的 代码 可 谓 是 Vuejjs 的 有 灵 魂 ， 也 是 我 们 之 后 需要 重点 分 析 的 地 方 。 


platform 


Vue.js 是 一 个 跨 平 台 的 MVVM 框架 ， 它 可 以 跑 在 web 上 ， 也 可 以 配合 weex 跑 在 natvie 客户 端 上 。 
platform 是 Vue.js 的 人 口 ，2 个 目录 代表 2 个 主要 入口， 分 别 打包 成 运行 在 web 上 和 weex 上 的 


Vue.js。 


我 们 会 重点 分 析 web 人 口 打包 后 的 Vue.js， 对 于 weex 入 口 打包 的 Vue.js， 感 兴趣 的 同学 可 以 自行 研 


完 。 


SefVer 
Vuejjs 2.0 支持 了 服务 端 泻 染 ， 所 有 服务 端 演 染 相 关 的 逻辑 都 在 这 个 目录 下 。 注 意 : 这 部 分 代码 是 跑 在 
服务 端的 Nodejs， 不 要 和 跑 在 浏览 器 端的 Vue.js 混为一谈 。 


服务 端 泻 染 主 要 的 工作 是 把 组 件 泻 染 为 服务 器 端的 HTML 学 符 串 ， 将 它们 直接 发 送 到 浏览 器 ， 最 后 将 
静态 标记 "混合 "为 客户 端 上 完全 交互 的 应 用 程序 。 


sfc 


通常 我 们 开发 Vue.js 都 会 借助 webpack 构建 ， 然后 通过 .vue 单 文件 的 编写 组 件 。 
这 个 目录 下 的 代码 逻辑 会 把 .vue 文件 内 容 解 析 成 一 个 JavaScript 的 对 象 。 


shared 


Vue.js 会 定义 一 些 工具 方法 ， 这 里 定义 的 工具 方法 都 是 会 被 浏览 器 山 的 Vue.js 和 服务 端的 Vue.js 所 共享 
的 。 


结 


|w 
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从 Vue.js 的 目录 设计 可 以 看 到 ， 作 者 把 功能 模块 拆 分 的 非常 清楚 ， 相 关 的 逻辑 放 在 一 个 独立 的 目录 下 
维护 ， 并 且 把 复 用 的 代码 也 抽 成 一 个 独立 目录 。 


这 样 的 目录 设计 让 代码 的 阅读 性 和 可 维护 性 都 变 强 ， 是 非常 值得 学 习 和 推 敲 的。 


Vue.js 源 但 构建 


Vue.js 源码 是 基于 Rollup 构建 的 ， 它 的 构建 相关 配置 都 在 scripts 目录 下 。 


构建 脚本 


通常 一 个 基于 NPM 托管 的 项 目 都 会 有 一 个 package.json 文件 ， 它 是 对 项 目的 描述 文件 ， 它 的 内 容 实际 
上 是 一 个 标准 的 JSON 对 象 。 


我 们 通常 会 配置 script 字段 作为 NPM 的 执行 脚本 ，Vue.js 源码 构建 的 脚本 如 下 : 


{ 
SC 六 
IDUice unoceEEscanpspbuadsee 
"build:ssr": "npm run build -- web-runtime-cjs,web-server-renderer'"， 
"build:weex": "npm run build --weex" 
】} 
】} 


这 里 总 共有 3 条 命令， 作用 都 是 构建 Vue.js， 后 面 2 条 是 在 第 一 条 命令 的 基础 上 ， 诡 加 一 些 环境 参数 。 


我 们 对 于 构建 过 程 分 析 是 基于 源码 的 ， 移 打开 构建 的 人 口 JS 文件 ， 在 scripts/build.js 中 : 
Jet builds = redquire('./Vconfig ' ) .getA1L1LBuilds() 


// filter builds via command 1Line arg 
If (process,argv[2]) { 
const filters = process.argv[2],Ssplit('"，) 
builds = builds.filter(b => 六 
return filters.Some(f => b.output.file,.indexof(f) > -1 工 || b._name.indexof(f) > 
芋 ) 
了 ) 
helse 1 
龙 和 全 faucenoutENweexabualdusabyEdefauut 
builds = builds.filter(b => 六 
return b,output .file.indexof( :weex' ) === - 工 


}) 


build(builds) 


Vue,js 源码 构建 


这 段 代 码 逻 辑 非 常 简单 ， 先 从 配置 文件 读 取 配 置 ， 再 通过 命令 行 参数 对 构建 配置 做 过 滤 ， 这 样 就 可 以 
构建 出 不 同 用 途 的 Vuejs 了 。 接 下 来 我 们 看 一 下 配置 文件 ， 在 scripts/config.js 中 : 


const builds = 攻 
// Runtime only (CommonJS)，Used by bundlers e.g，Webpack & BrowseriIfy 
"web-runtime-cjs': 蒜 
entry: resolve( 'web/entry-runtime.js')， 
dest: resolve( 'dist/vue.runtime.common.js')， 
format: "cjs'， 
banner 
】 
// Runtime+compiler CommonJS build (CommonJS) 
"web-fu1l1-cjs': 并 
entry: resolve( 'web/entry-runtime-with-compiler,js')， 
dest: resolve( 'dist/vue.common.js')， 
format: "cjs'， 
alalas' 人 nessentatysduecodern 7 
banner 
】 
// Runtime only (ES Modules). Used by bundlers that Support ES Modujles， 
EeeNOESEROULTLUPESRWNWebpacCkE2 
"web-runtime-esm' : 六 
entry: resolve( 'web/entry-runtime.js')， 
dest: resolve( 'dist/vue.runtime.esm.js')， 
format: "es'， 
banner 
】 
// Runtime+compIler CommonJS build (ES Modules ) 
"web-fu1l1-esm': 并 
entry: resolve( 'web/entry-runtime-with-compiler.js' )， 
dest: resolve( 'dist/vue.esm,js')， 
format: "es'， 
allas' 人 neseentnatysdecoder > 
banner 
】 
// runtime-only build (Browser) 
"web-runtime-dev': 荆 
entry: resolve( 'web/entry-runtime.js')， 
destresolveldrstVuesnruntanmesyJjs 
format: "umd '， 
env: 'deveJlopment '， 
banner 
】 
// runtime-only production build (Browser ) 
"web-runtime-prod ' :二 
entry: resolve( 'web/entry-runtime.js')， 
destiaresolveledzstVueasnruntameamansjis ) 
format: :umd '， 
env: "production'， 
banner 


}， 
// Runtime+compiler develLopment build (Browser ) 
"web-ful1-dev': 并 
entry: resolve( 'web/entry-runtime-with-compiler.js')， 
dest: resolve( 'dist/vue.js')， 
format: "umd '， 
env:  'development '， 
alnascheasentatysdecoduer ye 
banner 
】， 
// Runtime+compiler production build (Browser) 
"web-ful1-prod ': 攻 
entry: resolve( 'web/entry-runtime-with-compiler,.js')， 
dest: resolve( 'dist/vue.min.js')， 
format: "umd '， 
env: "production '， 
alaaschne sentntysduecoder 
banner 
】， 
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这 里 列举 了 一 些 Vue.js 构建 的 配置 ， 关 于 还 有 一 些 服 务 端 泻 染 webpack 插件 以 及 weex 的 打包 配置 承 不 
列举 了 。 


对 于 单个 配置 ， 它 是 遵循 Rollup 的 构建 规则 的 。 其 中 entry 属性 表示 构建 的 人 口 JS 文件 地 

址 ， dest 属性 表示 构建 后 的 JS 文件 地 址 。 format 属性 表示 构建 的 格式 ， cjs 表示 构建 出 来 的 
文件 遵循 CommonJS 规范 ， es 表示 构建 出 来 的 文件 遵循 ES Module 规范 。 umd 表示 构建 出 来 的 文 
件 遵循 UMD 规范 。 


以 web-runtime-cjs 配置 为 例 ， 它 的 entry 是 resolve('web/entry-runtime.js') ， 先 来 看 一 
下 resolve 数 的 定义 。 


源码 目录 : scripts/config .js 


const aliases = redquire('./Valias ' ) 
const resolve = p => { 
const base = p.split('/)[9] 
If (aliases[base]) 革 
return path,resolve(aliases[base]，p.slice(base,Jlength + 工 ) ) 
Jelse 
return path,resolve(_ dirname， '../'，p) 


这 里 的 resolve 画 数 实现 非常 简单 ， 它 先 把 resolve 本 数 传人 的 参数 p 通过 / 做 了 分 割 成 数 
组 ， 然 后 取 数 组 第 一 个 元 素 设 置 为 base 。 在 我 们 这 个 例子 中 ， 参 数 p 是 web/entry- 
runtime.js ， 那么 base 则 为 web 。 base 并 不 是 实际 的 路 径 ， 它 的 真实 路 径 借 助 了 别名 的 配 


置 ， 我 们 来 看 一 下 别名 配置 的 代码 ， 在 scripts/alias 中 : 
const path = require('path ' ) 


module.exports = 革 


Vvue: path.resolve(_ dirname， '.,./src/VpJlatforms/Vweb/entry-runtime-with-compIler ')， 
compiIiler: path.resolve(_ dirname， '../src/vcompiler ')， 

core: path.resolve(_ dirname， ',../srcvcore ' )， 

shared: path.resolve(_ ”dirname， '../src/shared ' )， 

web: path.resolve(_ dirname， ',.,/src/platforms/web ' )， 

weex: path.resolve(_ dirname， ',./src/Vplatforms/Vweex ' )， 

Server: path.resolve(_” dirname， '../src/server ' )， 

entries: path,resolve(_ dirname， '../src/ventries ' )， 

sfc: path.resolve(_ ”dirname， '.,/src/vsfc ' ) 


很 显然 ， 这 里 web 对 应 的 真实 的 路 径 是 path.resolve(_ ”dirname， ',.,./Vsrc/vplatforms/web ' ) ， 
这 个 路 径 束 找到 了 Vue.js 源码 的 web 目录 。 然 后 resolve 本 数 通过 
path.resolve(aliases[base]，p.slice(base.length + 1)) 找到 了 最 终 路 径 ， 它 就 是 Vue.js 源码 
web 目录 下 的 entry-runtime.js 。 因 此 ， web-runtime-cjs 配置 对 应 的 人口 文件 就 找到 了 。 


它 经 过 Rollup 的 构建 打包 后 ， 最 终 会 在 dist 目录 下 生成 vue.runtime.common.js 。 


Runtime Only VS Runtime+Compiler 


通常 我 们 利用 vue-cli 去 初始 化 我 们 的 Vue.js 项 目的 时 候 会 询问 我 们 用 Runtime Only 版 本 的 还 是 
Runtime+Compiler 版 本 。 下 面 我 们 来 对 比 这 两 个 版 本 。 


e Runtime Only 


我 们 在 使 用 Runtime Only 版 本 的 Vue.js 的 时 候 ， 通 常 需要 借助 如 webpack 的 vue-loader 工具 把 .vue 文 
件 编译 成 JavaScript， 因 为 是 在 编译 阶段 做 的 ， 所 以 它 只 包含 运行 时 的 Vuejs 代码 ， 因 此 代码 体积 也 会 
更 轻 量 。 


e Runtime+Compiler 


我 们 如 果 没 有 对 代码 做 预 编译 ， 但 又 使 用 了 Vue 的 template 属性 并 传人 一 个 字符 串 ， 则 需要 在 客户 端 
编译 模板 ， 如 下 所 示 : 


// 需要 编译 器 的 版 本 
new Vue({ 

tempJlate: "<div>{{t hz }}</div>， 
]) 


// 这 种 情况 不 需要 
new Vue({ 
render (h) { 
euronalhn (人 本 TVOEIais 汪 | 二 


}) 


因为 在 Vue.js 2.0 中 ， 最 终 浑 染 都 是 通过 render 画 数 ， 如 果 写 template 属性 ， 则 需要 编译 成 
render 丁 数 ， 那 么 这 个 编译 过 程 会 发 生 运 行 时 ， 所 以 需要 带 有 编译 器 的 版 本 。 


很 显然 ， 这 个 编译 过 程 对 性 能 会 有 一 定 损耗 ， 所 以 通常 我 们 更 推荐 使 用 Runtime-Only 的 Vue.js。 


对 


记 |w 
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通过 这 一 节 的 分 析 ， 我 们 可 以 了 解 到 Vue.js 的 构建 打包 过 程 ， 也 知道 了 不 同 作用 和 功能 的 Vue,js 它们 
对 应 的 和 人 口 以 及 最 终 编译 生成 的 JS 文件 。 尽 管 在 实际 开发 过 程 中 我 们 会 用 Runtime Only 版 本 开发 比较 
多 ， 但 为 了 分 析 Vue 的 编译 过 程 ， 我 们 这 门 课 重 点 分 析 的 源码 是 Runtime+Compiler 的 Vue.js。 


从 和 人口 开 始 


我 们 之 前 提 到 过 Vue.js 构建 过 程 ， 在 web 应 用 下 ， 我 们 来 分 析 Runtime + Compiler 构建 出 来 的 Vue.js， 


它 的 人 口 是 src/platforms/web/entry-runtime-with-compiler.js 
OBEON 


Import config from "core/confjig' 
Import { warn，cached } from "core/vutil/index 
Import { mark，measure } from "core/util/vperf ' 


Import Vue from '".Vruntime/index' 

Timpomte queryeitcom AUEIUYOmdUex> 

Import { compIileToFunctions } from './VcompiIler/index 

Import { shouldDecodeNew]lines，shouldDpecodeNew1linesForHref } from ".VutIl/Zcompat 


const IdToTempJlate = cached(id => { 
const el = query(id) 
return el && el,innerHTML 

】) 


const mount = Vue.prototype.$mount 

Vue.prototype.$mount = function 人 
el93 String | Elementy， 
hydrating?: boolean 

) 2 Component 1 
el = el && duery(el) 


/* Istanbul Ignore ff “*/ 


If (el === document .body || el === document .documentE1Lement ) 六 
process.env.NODE_ENV !== "production”&& warn( 
“Do not mount Vue to <html> or <body> - mount to normal elements instead 
) 
euUemn 刘 世 fais 


const options = this.$options 
// resolve template/vel and convert to render function 
If (!options.render) 革 
Jet tempJlate = options,template 
If (temp1late) 攻 
if (typeof tempJlate === "String') { 
If (temp1late.charAt(0) === “##') 革 
tempJlate = idToTempJlate(tempJlate) 
/* Istanbul Ignore 工 */ 
If (process.env.NODE_ENV !== ' production'” && !template) 
warn( 
“TempJlate element not found or Is empty: $toptions .temp1Late} ， 


ths 


} else if (tempJlate.nodeType) { 
template = tempJlate.InnerHTML 


ELSE 
if (process.env.NODE_ENV !== "production' ) 攻 
warn('invalid template option:'” + tempJlate，this) 
euanabnms 


elseatiGemy) 本 人 
template = getouterHTML(eJ) 
】} 
If (template) 革 
/* Istanbul Iignore 工 “/ 
If (process.env.NODE_ENV !== "production”&& config.performance && mark) 革 
mark(' compile ') 


const { render，staticRenderFns } = compileToFunctions(tempJate， 蔷 
ShouldDecodeNew1lines， 
ShouldDecodeNew]linesForHref， 
delimiters: options .delimiters， 
comments: options.commentSs 
人 EDEs) 
options render = render 
options ,staticRenderFns = staticRenderFns 


TSEanbuleagnmoie in 

If (process.env.NODE_ENV !== 'production”&& config.performance && mark) 二 
mark(' compile end ' ) 
measure( Vvue ${tthis,_name} compile ， "compile'"， "compile end ') 


return mount.call(this，el，hydrating ) 


[ 
* Get outerHTML of elements，taking care 
“OUEESVGEenlememtsanaIEaSENeLIE 
0 

function getOouterHTMLC (el EJement) strang 攻 

If (elL.outerHTML ) 攻 
return el.outerHTML 

Telse 
const container = document .createE]lement('div') 
container .appendCchild(el.cloneNode(true) ) 
return container ,InnerHTML 


Vue,.compile = compileToFunctions 


export default Vue 


那么 ， 当 我 们 的 代码 执行 import Vue from 'vue' 的 时 候 ， 就 是 从 这 个 大 口 执行 代码 来 初始 化 
Vue， 那 么 Vue 到 底 是 什么 ， 它 是 怎么 初始 化 的 ， 我 们 来 一 探 完 竟 。 


Vue 的 和 人 口 


在 这 个 大 口 JS 的 上 方 我 们 可 以 找到 vue 的 来 源 : _ import vue from './runtime/index' ， 我 们 先 
来 看 一 下 这 块 儿 的 实现 ， 它 定义 在 Src/Vplatforms/webvruntime/index,.Jjs 中 : 


Import Vue' from :Core/index-” 

Import config from "core/confjig' 

Import { extend，noop } from "shared/util' 

Import { mountComponent } from "core/instance/1Lifecycjle'， 

Import { devtools，inBrowser，isChrome } from "core/vutil/Vindex' 


Import 1{ 
query， 
mustUseProp， 
SReservedTag， 
SReSservedAttr， 
getTagNamespace， 
ISUnknownEJement 

} from "web/util/index' 


ImportDatcCh) aomes De 
Import pJatformDirectives from ",V/directives/index' 
Import pJLatformComponents from ",./Vcomponents/index' 


Ts 七 aa 可 lpEEaieomespecoioecEUto is 
Vue,config.mustUseProp = mustUseProp 
Vue.config.iIisReservedTag = IsSReservedTag 
Vue.config.iIisReservedAttr = IsSReservedAttr 
Vue,config.getTagNamespace = getTagNamespace 
Vue,config. IsUnknownEJlement = IsUnknownEJement 


// instal1 platform runtime directives & components 
extend(Vue.options .directives，platformDirectives) 


extend(Vue.options.components，platformcomponents ) 


// instal1 plLlatform patch function 
Vue,.prototype,. patch_ = inBrowser ? patch : noop 


// public mount method 


Vue.prototype.$mount = function 人 
el]l2?2: String | ELementy” 
hydrating?: boolean 
)EEonmpornenc 1 
el = el && inBrowser ? query(el) : undefined 
return mountComponent(this，el，hydrating ) 


NA 


export default Vue 


这 里 关键 的 代码 是 import Vvue from 'core/index' ， 之 后 的 逻辑 都 是 对 Vue 这 个 对 象 做 一 些 扩展 ， 
可 以 先 不 用 看 ， 我 们 来 看 一 下 真正 初始 化 vue 的 地 方 ， 在 src/core/index.js 中 : 


Import Vue from './instance/index 

Import { initGlobalAPI } from '"./global-api/index' 

Import { IsServerRendering } from "core/vutil/env' 

Import { FunctionalRenderContext } from "core/vdomVcreate-functional-component ' 


InitGlobalAPI(Vue) 


Object ,defineProperty(Vue.prototype， '$isServer '， 攻 
get: IsServerRendering 


】) 


Object ,defineProperty(Vue.prototype， '$ssrContext '， 攻 
get () 攻 
/* istanbul 1Ignore next */ 
return this,$vnode && this,$vnode.ssrContext 
} 
}) 


// expose FunctionalRenderContext for ssr runtime helper installation 
Object ,defineProperty(Vue， 'FunctionalRenderContext '， 攻 
value: FunctionalRenderContext 


}) 


Vue.Vverslion = ' VERSION 


export default Vue 


这 里 有 2 处 关键 的 代码 ， :import vue from './instance/index' 和 initGlobalAPI(Vue) ， 初 始 
化 全 局 Vue API (我 们 稍 后 介绍 ) ， 我 们 先 来 看 第 一 部 分 ， 在 src/core/instance/index.js 中 : 


Vue 的 定义 


Import { InitMixin } from "./init' 


Import { stateMixin } from '",/state' 

Import { renderMixin } from ".Vrender' 
Import { eventsMixin } from ",./events ' 
lmportEaftecycleMuxangs troma safecycle> 
Import { warn } from ".,,Vutil/index' 


function Vue (options) 六 


If (process.env,.NODE_ENV !== "production”&& 
!(thlis Instanceof Vue) 
/是 
warn('Vue is a constructor and should be called with the new” ”keyword ' ) 
} 
this,_ init(options ) 
】} 
InitMixin(Vue) 
StateMIixin(Vue) 
eventSsMixin(Vue) 


JifecycJleMixin(Vue ) 
renderMixin(Vue) 


export default Vue 


在 这 里 ， 我 们 终于 看 到 了 Vue 的 雇 山 真面目 ， 它 实际 上 就 是 一 个 用 Function 实现 的 类 ， 我 们 只 能 通过 
new Vvue 去 实例 化 它 。 


有 些 同 学 看 到 这 不 禁 想 问 ， 为 何 Vue 不 用 ES6 的 Class 去 实现 呢 ? 我 们 往 后 看 这 里 有 很 多 xxxMixin 
的 函 数 调用 ， 并 把 vue 当 参 数 传人 ， 它 们 的 功能 都 是 给 Vue 的 prototype 上 扩展 一 些 方法 〈 这 里 具体 
的 细 克 会 在 之 后 的 文章 介绍 ， 这 里 不 展开 ) ，Vue 按 功能 把 这 些 扩展 分 散 到 多 个 模块 中 去 实现 ， 而 不 
是 在 一 个 模块 里 实现 所 有 ， 这 种 方式 是 用 Class 难以 实现 的 。 这 么 做 的 好 处 是 非常 方便 代码 的 维护 和 管 
理 ， 这 种 编程 技巧 也 非常 值得 我 们 去 学 习 。 


IniItGlLobalAPI 


Vuejs 在 整个 初始 化 过 程 中 ， 除 了 给 它 的 原型 prototype 上 扩展 方法 ， 还 会 给 vue 这 个 对 象 本 身 扩展 
全 局 的 静态 方法 ， 它 的 定义 在 src/core/global-api/index.js 中 : 


export function initGlobalAPI (Vue: GlobalAPI) 攻 
// config 
const configpDef = 1 
configpDef,get = () => config 


If (process.env.NODE_ENV !== "production' ) { 
configpDef .set = () => { 
warn( 


DonotarepilacecnensVuesconfagobject setmndavduanifaeldusansteadg 本 


】} 
0bject.defineProperty(Vue， 'config'"，configpef ) 


// exposed utilL methods . 
// NOTE: these are not considered part of the public API - avoid relying on 
// them unless you are aware of the risk， 
Vue.util = 革 
warn， 
extend ， 
mergeoptions， 
defineReactive 


Vue .set = Set 
Vue .delete = del 
Vue .nextTick = nextTick 


Vue.options = 0bject.create(nu]l1l) 
ASSET_TYPES ,forEach(type => 1{ 

Vue.options[type + 'S'] = 0bject,create(nu]l1) 
了]) 


// this is used to identify the "base"” constructor to extend al1 plain-object 
// components with in Weex's multi-iIinstance Scenarilos , 
Vue.options._base = Vue 


extend(Vue.options ,components，builtInCcomponents ) 


InitUse(Vue) 
InitMixin(Vue) 
IniItExtend(Vue) 
InitAssetRegisters(Vue) 


这 里 就 是 在 Vue 上 扩展 的 一 些 全 局 方法 的 定义 ，Vue 官网 中 关于 全 局 API 都 可 以 在 这 里 找到 ， 这 里 不 
会 介绍 细节 ， 会 在 之 后 的 章节 我 们 具体 介绍 到 某 个 API 的 时 候 会 详细 介绍 。 有 一 点 要 注意 能 

是 ， vue.util 暴露 的 方法 最 好 不 要 依赖 ， 因 为 它 可 能 经 常会 发 生变 化 ， 是 不 稳定 的 。 

总 结 

那么 至 此 ，Vue 的 初始 化 过 程 基 本 介绍 完毕 。 这 一 节 的 目的 是 让 同学 们 对 Vue 是 什么 有 一 个 直观 的 认 
识 ， 它 本 质 上 就 是 一 个 用 Function 实现 的 Class， 然 后 它 的 原型 prototype 以 及 它 本 身 都 扩展 了 一 系列 的 
方法 和 属性 ， 那 么 Vue 能 做 什么 ， 它 是 怎么 做 的 ， 我 们 会 在 后 面 的 章节 一 层 层 帮 大 家 揭 开 Vue 的 神秘 
面纱 。 


数据 驱动 


Vuejjs 一 个 核心 思想 是 数据 驱动 。 所 谓 数据 驱动 ， 是 指 视 图 是 由 数据 驱动 生成 的 ， 我 们 对 视图 的 修改 ， 
不 会 直接 操作 DOM， 而 是 通过 修改 数据 。 它 相 比 我 们 传统 的 前 疹 开 发 ， 如 使 用 jQuery 等 前 端 库 直 接 
修改 DOM， 大 大 简化 了 代码 量 。 特 别 是 当 交 互 复杂 的 时 候 ， 只 关心 数据 的 修改 会 让 代码 的 逻辑 变 的 非 
常 清晰 ， 因 为 DOM 变 成 了 数据 的 映射 ， 我 们 所 有 的 逻辑 都 是 对 数据 的 修改 ， 而 不 用 碰 触 DOM， 这 样 
的 代码 非常 利于 维护 。 


在 Vue.js 中 我 们 可 以 采用 简 浩 的 模板 语法 来 声明 式 的 将 数据 演 染 为 DOM : 


<djiv Id="app"> 
{{ 人 message 】}} 
</div> 


Var app = new Vue({ 
elL: '#app'， 
data: 蔷 
message: "Hello Vuel 
】} 
了 ) 


最 终 它 会 在 页 面 上 渲染 出 Hello vue 。 接 下 来 ， 我 们 会 从 源码 角度 来 分 析 Vue 是 如 何 实现 的 ， 分 析 
过 程 会 以 主线 代码 为 主 ， 重 要 的 分 支 逻 辑 会 放 在 之 后 单独 分 析 。 数 据 红 动 还 有 一 部 分 是 数据 更 新 驱动 
视图 变化 ， 这 一 块 内 容 我 们 也 会 在 之 后 的 章节 分 析 ， 这 一 章 我 们 的 目标 是 型 清楚 模板 和 数据 如 何 演 染 
成 最 终 的 DOM。 


new Vue 发 生 了 什么 


从 大 口 代 码 开始 分 析 ， 我 们 先 来 分 析 new vue 背后 发 生 了 哪些 事情 。 我 们 都 知道 ， new 关键 字 在 
Javascript 语言 中 代表 实例 化 是 一 个 对 象 ， 而 _Vvue 实际 上 是 一 个 类 ， 类 在 Javascript 中 是 用 Function 
来 实现 的 ， 来 看 一 下 源码 ， 在 src/core/instance/index,js 中 。 


function Vue (options) 区 


If (process.env.NODE_ENV !== "production”&& 

!(this instanceof Vue) 
) 下 人 

warn('Vue is a constructor and Should be called with the new ” ”keyword ' ) 
】} 


this,_ init(options ) 


可 以 看 到 vue 只 能 通过 new 关键 字 和 初始 化 ， 然 后 会 调用 this,_init 方法 ， 该 方法 在 
src/core/instance/init.js 中 定义 。 


Vue.prototype._init = function (options?: 0bject) { 
const vm: Component = thIs 
全 Uaid 
Vvm,_uUid = UId++ 


let StartTag，endTag 
7 芝 TSEEanbuleaignorme 和 7 


If (process.env.NODE_ENV !== ' production”&& config.performance && mark) 革 
startTag =  vue-perf-start:$tvm,_uUid} 
endTag =  Vvue-perf-end:$ftvm,_uid} 
mark(startTag) 


// a flag to avoid this being observed 
Vvm.,_ isVue = true 
// merge options 
If (options && options,_ IsComponent ) 攻 
// optimize internal component instantiation 
// Since dynamic options merging Is pretty Slow，and none of the 
// internal component options needs Special treatment . 
InitInternalComponent(vm，options ) 
Jelse { 
vm,$options = mergeoptions( 
resolveCconstructoroptions(vm.constructor )， 
Options || 人 {， 
Vm 


/* lstanbul Ignore else */ 


If (process.env.NODE_ENV !== "production' ) { 
InitProxy(vm) 

helse tf 
Vvm,_renderProxy = Vvm 

】} 

// expose real self 

Vvm,_Sself = Vm 

InitLifecycJle(vm) 

InitEVvents(vm) 

InitRender(vm) 

cal1Hook(vm， 'beforecreate ' ) 

initInjections(vm) // resolve injections before data/props 

InitState(vm) 

InitProvide(vm) // resolve provide after data/props 

calJHook(vm， "created ' ) 


/* Istanbul 1Ignore If */ 

If (process.env.NODE_ENV !== ' production”&& config.performance && mark) 荆 
vm,_name = formatComponentName(vm，Tfalse) 
mark(endTadg ) 
measure( vue $tvm._name} init ，SstartTag，endTag ) 


If (vm,$options,el) 革 
vm,$mount(vm.$options .el) 


Vue 初始 化 主要 就 干 了 几 件 事 情 ， 合 并 配置 ， 初 始 化 生命 周期 ， 初 始 化 事件 中 心 ， 初 始 化 泻 染 ， 初 始 
化 data、props、computed、watcher 等 等 。 

总 结 

Vue 的 初始 化 逻辑 写 的 非常 清楚 ， 把 不 同 的 功能 逻辑 拆 成 一 些 单独 的 函数 执行 ， 让 主线 逻辑 一 目 了 
然 ， 这 样 的 编程 思想 是 非常 值得 借鉴 和 学 习 的 。 

由 于 我 们 这 一 章 的 目标 是 弄 清 楚 模板 和 数据 如 何 演 染 成 最 终 的 DOM， 所 以 各 种 初始 化 逻辑 我 们 先 不 
看 。 在 初始 化 的 最 后 ， 检 测 到 如 果 有 el 属性 ， 则 调用 vm.$mount 方法 挂 载 vm ， 挂 载 的 目标 就 
是 把 模板 演 染 成 最 终 的 DOM， 那 么 接 下 来 我 们 来 分 析 Vue 的 挂 载 过 程 。 


Vue 实例 挂 载 的 实现 


Vue 中 我 们 是 通过 $nmount 实例 方法 去 挂 载 vm 的 ， $nmount 方法 在 多 个 文件 中 都 有 定义 ， 如 


Src/Vplatform/web/entry-runtime-with- 

compiler,. js 、 src/platform/webVvruntime/index, js 、 src/vpJlatform/weex/vruntime/index.Jjs 
。 因 为 $nmount 这 个 方法 的 实现 是 和 和 平台、 构建 方 式 都 相关 的 。 接 下 来 我 们 重点 分 析 带 ”compiler 

版 本 的 $monut 实现 ， 因 为 抛 开 webpack 的 vue-loader， 我 们 在 纯 前 端 浏 览 器 环境 分 析 Vue 的 工作 原 
理 ， 有 助 于 我 们 对 原理 理解 的 深入 。 


compiler 版 本 的 $monut 实现 非常 有 意思 ， 先 来 看 一 下 _ src/platform/web/entry-runtime- 
with-compiler.js 文件 中 定义 : 


const mount = Vue.prototype.$mount 

Vue,.prototype.$mount = function (人 
el]l?2: String | Element， 
hydrating?: boolean 

) 3 Component 1 
el = el && duery(el) 


/* lstanbul 1Ignore IT *V 
If (el === document .body || el === document .documentE1Lement ) 六 
process.env.NODE_ENV !== ' production”&& warn( 
“Do not mount Vue to <htm]l> or <body> - mount to normal elements instead 


) 


return thIs 


const options = this,.$options 
// resolve template/el and convert to render function 
If (!options.render) 革 
Jet template = options.temp1late 
If (template) 革 
If (typeof temp1late === ' String ') 攻 
If (temp1late.charAt(0) === “##') 
tempJlate = IdToTemplate(tempJate) 
SEODUNEEIOWOI GT 人 2 
If (process.env.NODE_ENV !== production'” && !template) 
warn( 
`“ Template element not found or is empty: ${toptions .tempJate}+ ， 
Enais 


} else if (tempJlate.nodeType) 革 
template = template.iInnerHTML 
Telse 1 
If (process.env.NODE_ENV !== "production') 攻 
warn(' Invalid tempJlate option:' + template，this) 


】} 


IEeEUan 电 nms 
elseafkemy) 本 人 
template = getouterHTML(eJ) 
】} 
If (template) 六 
LIStanbURIIOIUOIEGESE 人 7 
If (process,env.NODE_ENV !== "production'&& config.performance && mark) 革 
mark(' compile ') 


const { render，staticRenderFns } = compileToFunctions(tempJate 蔷 
ShouldDecodeNew1lLines， 
ShouldDecodeNew]linesForHref， 
delimiters: options .delimiters， 
comments: options.commentSs 
}，this ) 
options render = render 
options .statIicRenderFns = StaticRenderFns 


StEanouludnoieTRE 

If (process.env.NODE_ENV !== "production”&& config.performance && mark) 革 
mark( ' compile end ' ) 
measure( Vvue $tthis,._name} compile ， "compIile'， "compile end ' ) 


】} 


return mount.call(this，el，hydrating ) 


这 段 代 码 首先 缓存 了 原型 上 的 $mount 方法 ， 再 重新 定义 该 方法 ， 我 们 先 来 分 析 这 段 代 码 。 首 先 ， 它 
对 el 做 了 限制 ，Vue 不 能 挂 载 在 body 、 _ html 这 样 的 根 节点 上 。 接 下 来 的 是 很 关键 的 逻辑 一 一 
如 果 没 有 定义 render 方法 ， 则 会 把 el 或 者 template 字符 绅 转 换 成 render 方法 。 这 里 我 们 
要 牢记 ， 在 Vue 2.0 版 本 中 ， 所 有 Vue 的 组 件 的 浑 染 最 终 都 需要 render 方法 ， 无 论 我 们 是 用 单 文件 
.vue 方式 开发 组 件 ， 还 是 写 了 el 或 者 template 属性 ， 最 终 都 会 转换 成 render 方法， 那么 这 个 
过 程 是 Vue 的 一 个 “在 线 编译 ”的 过 程 ， 它 是 调用 compileToFunctions 方法 实现 的 ， 编 译 过 程 我 们 之 
后 会 介绍 。 最 后 ， 调 用 原先 原型 上 的 $mount 方法 挂 载 。 


原先 原型 上 的 $mount 方法 在 Src/platform/webVvruntime/index.js 中 定义 ， 之 所 以 这 么 设计 完 
全 是 为 了 复 用 ， 因 为 它 是 可 以 被 runtime only 版 本 的 Vue 直接 使 用 的 。 


// public mount method 
Vue,.prototype.$mount = function (人 
Eleewskirang 加 | EUement 
hydrating?: boolean 
): Component 攻 
el = el && inBrowser ? duery(el) : undefined 
return mountComponent(this，el，hydrating ) 


$mount 方法 文 持 传人 2 个 参数 ， 第 一 个 是 el ， 它 表示 挂 载 的 元 素 ， 可 以 是 字符 串 ， 也 可 以 是 
DOM 对 象 ， 如 果 是 字符 串 在 浏览 器 环境 下 会 调用 query 方法 转换 成 DOM 对 象 的 。 第 二 个 参数 是 和 
服务 端 浑 染 相 关 ， 在 浏览 器 环境 下 我 们 不 需要 传 第 二 个 参数 。 


$mount 方法 实际 上 会 去 调用 mountComponent 方法 ， 这 个 方法 定义 在 
src/core/instance/lifecycle.js 文件 中 : 


export function mountComponent (人 
vm: Component， 
el1: ?ElLement， 
hydrating?: boolean 
并 大 Componenm 记 下 人 
Vvm.$el = el 
If (!vm.$options.render) 攻 
Vvm,$options,.render = createEmptyVNode 
If (process.env.NODE_ENV !== "production' ) 革 
/* Istanbul Ignore If “*/ 
If ((vm.$options.tempJlate && vm.$options,template,charAt(9) !==  #') | 
Vvm.$options.el || el) { 
warn( 
"You are USing the runtime-only build of Vue where the tempJlate ”二 
compalerisinotavarliablesnErtner presconpouenthneatemnpiatesE TInEoO 
"render functions，or Use the compiler=included build.'， 
Vm 
) 
站 else 
warn( 
xuEaoledEcomoune componenec templaterorrnendemiftunctonnoteuefaned 
Vm 


calJIHook(vm， 'beforeMount ' ) 


let updateCcomponent 
SEEanpUlgIgnoe 了 7 
If (process.env.NODE_ENV !== "production”&& config.performance && mark) 荆 
updateComponent = () => f 
const name = vm,_name 
const id = vm._uid 
const startTag =  Vvue-perf-start:${tid} 
const endTag =  vue-perf-end:${tid}- 


mark(startTag ) 

const vnode = vm,_render() 

mark(endTag ) 

measure( Vvue $tname} render ，SstartTag，endTag ) 


mark(startTag ) 
vm,_update(vnode，hydrating ) 
mark(endTag ) 
measure( Vvue $tname} patch ，startTag，endTag ) 
】} 
else 
updateComponent = () => 
vm,_update(vm,_render()，hydrating) 


// we set this to vm, watcher inside the watcher 's constructor 
/IEsanceeEthneawatccnern snntralpatcnanaycaSftonceuUpdgateesgnaansadecnaudg 
// component 's mounted hook)，which relies on vm,_ watcher being already defined 
new Watcher(vm，updatecomponent，noop， 攻 
before () 革 
If (vm._ isMounted) 革 
calJHook(vm， 'beforeUpdate ' ) 


】} 


CUEEAISRenuerwWakEchnei yy 
hydrating = false 


// manually mounted instance，call mounted on self 
// mounted Is called for render-created child components in its Inserted hook 
If (vm.$vnode == null) 攻 

vm,_ isSMounted = true 

calJIHook(vm， mounted ' ) 


return Vm 


从 上 面 的 代码 可 以 看 到 ， mountcomponent 核心 就 是 先 调 用 vm._render 方法 先生 成 虚拟 Node， 再 
实例 化 一 个 演 染 watcher ， 在 它 的 回调 函数 中 会 调用 updatecomponent 方法， 最 终 调用 
vm,_update 更 新 DOM。 


Watcher 在 这 里 起 到 两 个 作用 ， 一 个 是 初始 化 的 时 候 会 执行 回调 函数 ， 另 一 个 是 当 vm 实例 中 的 监测 
的 数据 发 生变 化 的 时 候 执行 回调 本 数 ， 这 块 儿 我 们 会 在 之 后 的 章节 中 介绍 。 
本 数 最 后 判断 为 根 节点 的 时 候 设 置 vm._isMounted 为 true ， 表示 这 个 实例 已 经 挂 载 了 ， 同 时 执行 


mounted 钩子 函数 。 这 里 注意 vm.$vnode 表示 Vue 实例 的 父 虚 拟 Node， 所 以 它 为 Nul1L 则 表示 
当前 是 根 Vue 的 实例 。 


总结 


4 一 | 


mountComponent 方法 的 逻辑 也 是 非常 清晰 的 ， 它 会 完成 整个 演 染 工作 ， 接 下 来 我 们 要 重点 分 析 其 中 
的 细节 ， 也 就 是 最 核心 的 2 个 方法 : vm._render 和 vm._update 。 


Vue 实例 挂 载 的 实现 
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render 


Vue 的 _render 方法 是 实例 的 一 个 私有 方法 ， 它 用 来 把 实例 演 染 成 一 个 虚拟 Node。 它 的 定义 在 


src/core/instance/render.js 文件 中 : 


Vue.prototype._render = function (): VNode { 
const vm: Component = thIs 
const { render，_parentVvnode } = vm.$options 


// reset _rendered flag on Slots for duplicate Slot check 
If (process.env.NODE_ENV !== "production' ) { 
for (const key in vm,.$slots) 六 
// $flow-disable-ine 
vm.$slots[key].,_rendered = false 


If (_parentVnode) 攻 
vm,$scopedSlots = _parentVvnode.data.scopedSlots || emptyobject 


// Set parent vnode. this allows render functions to have access 
// to the data on the placeholder node， 


vm.$vnode = _parentVvnode 
光合 rendeneseli 

let vnode 

Er 


Vvnode = render.callL(vm.,_renderProxy，Vvm.$createElement ) 
Tcatcnatey) 正 人 
handleError(e，Vvm render ) 
// return error render result， 
// or previous vnode to prevent render error causing blank component 
/* Istanbul Ignore else */ 


If (process .env.NODE_ENV !== "production' ) 革 
If (vm.$options.renderError) 攻 
TY 于 上 


vnode = vm.$options,renderError.call(vm._renderProxy，Vvm.$createElement， 
e) 
acaccnEtey) 下 
handJeError(e，vm， renderError ) 
vnode = vm,_vnode 
有 
Telse 1{ 
vnode = vm,_vnode 
else 
Vvnode = vm,_vnode 


// return empty Vvnode in case the render function errored out 
if (!(vnode instanceof VNode)) 攻 
If (process,.env.NODE_ENV !== "production”&& Array.isArray(vnode)) 攻 
warn( 
JMUELtEPpLeErooeinoduesanretunnedifromarcenderhunctaonmRender uncconma 
"Should return a Single root node.'， 
Vm 


】} 
Vvnode = createEmptyVNode() 


】} 
// Set parent 


vnode.parent = _parentVnode 
return vnode 


这 段 代 码 最 关键 的 是 render 方法 的 调用 ， 我 们 在 平时 的 开发 工作 中 手写 render 方法 的 场景 比较 
少 ， 而 写 的 比较 多 的 是 template 模板 ， 在 之 前 的 mounted 方法 的 实现 中 ， 会 把 template 编译 
成 render 方法 ， 但 这 个 编译 过 程 是 非常 复杂 的 ， 我 们 不 打算 在 这 里 展开 讲 ， 之 后 会 专门 花 一 个 章节 
来 分 析 Vue 的 编译 过 程 。 


在 Vue 的 官方 文档 中 介绍 了 _ render 画 数 的 第 一 个 参数 是 _createElement ， 那 么 结合 之 前 的 例子 : 


<div Id="app"> 


{{ 人 message 】}} 
</div> 


相当 于 我 们 编写 如 下 _render 画 数 : 


render: function (createElLement ) 1 
return createEJement('div'，{ 


attics 有 人 
id: "app' 
] 
}，this.message) 


再 回 到 _render 本 数 中 的 render 方法 的 调用 : 


Vvnode = render.callL(vm._renderProxy，Vvm.$createElement ) 


可 以 看 到 ， render 酚 数 中 的 ”createElement 方法 就 是 vm.$createElement 方法 : 


export function initRender (vm: Component ) 攻 
OA 
AbandEcnencnreateElemnent intotnIsaanstance 


// So that we get proper render context Inside it.， 

// args order: tag，data，children，normalizationType，alwaySsNormalize 
// internal version is used by render functions compIiled from tempJlLates 
vm,. CC = (a，b，c，d) => createEJlement(vm，a， b，c，d，false) 


// normalization 1IS always applied for the pub1lic version，used in 
// user-written render functions 
vm.$createElement = (a，b，c，d) => createElement(vm，a，b，c，d，true) 


实际 上 ， vm.$createElement 方法 定义 是 在 执行 initRender 方法 的 时 候 ， 可 以 看 到 除了 
vm.$createELlement 方法 ， 还 有 一 个 _vm._c 方法 ， 它 是 被 模板 编译 成 的 render 画 数 使 用 ， 而 
vm.$createElement 是 用 户 手写 render 方法 使 用 的 ， 这 俩 个 方法 支持 的 参数 相同 ， 并 且 内 部 都 
调用 了 _ createElement 方法 。 


总 结 
vm._render 最 终 是 通过 执行 createELement 方法 并 返回 的 是 _vnode ， 它 是 一 个 虚拟 Node。Vue 
2.0 相 比 Vue 1.0 最 大 的 升级 就 是 利用 了 Virtual DOM。 因 此 在 分 析 createElement 的 实现 前 ， 我 们 
先 了 解 一 下 Virtual DOM 的 概念 。 


Virtual DOM 


Virtual DOMI 


Virtual DOM 这 个 概念 相信 大 部 分 人 都 不 会 陌生 ， 它 产生 的 前 提 是 浏览 器 中 的 DOM 是 很 < 昂贵 "的 ， 为 
了 更 直观 的 感受 ， 我 们 可 以 简单 的 把 一 个 简单 的 div 元 素 的 属性 都 打印 出 来 ， 如 图 所 示 : 


> Var div 
Var Str 
for (var key in div){ 

str += key + “ 


document ,createEUement( 'div') 


"alLign titte Lang translLate dir dataset hidden tabIndex accessKkey draggabtLe speLtLcheck contentEditabte isContentEditabte 
offsetpParent offsetTop offsetLeft offsetwWidth offsetHelight styte innerText outerText webkitdropzone onabort onbLur 
oncanceL oncanpLay oncanpLaythrough onchange onctLick oncLose oncontextmenu oncuechange ondbtLcLick ondrag ondragend 
ondragenter ondragtLeave ondragover ondragstart ondrop ondurationchange onemptied onended onerror onfocus oninput 
oninvalid onkeydown onkeypress onkeyup ontLoad onLoadeddata ontLoadedmetadata ontLoadstart onmousedown onmouseenter 
onmousetLeave onmousemove Onmouseout onmouseover onmouseup onmousewheetL onpause onplLay onptLaying onprogress onratechange 
onreset onresize onscroLtL 0nseeked onseeking onselLect onshow onstalLLed onsubmit onsuspend ontimeupdate ontoggtLe 
onvoLumechange onwaiting ctLick focus bLur onautocomptLete onautocompLeteerror namespaceURI prefix LocatName tagName id 
cLassName CULassList attributes innerHTML outerHTML shadowRoot scrolLLTop scroLLLeft scroLtUWidth scroLLHelight cLientTop 
cLientLeft cLientwidth cLientHeight onbeforecopy onbeforecut onbeforepaste oncopy oncut onpaste onsearch onseLectstart 
onwheeL onwebkitfuLtscreenchange onwebkitfuLLscreenerror previousELementSibting nextELement5SibtUing chitUdren 
firstELementChitd LastELementChitd chiUdELementCount hasAttributes getAttribute getAttributeNS setAttribute 
setAttributeNS removeAttribute removeAttributeNS hasAttribute hasAttributeNS getAttributeNode getAttributeNodeN5 
setAttributeNode setAttributeNodeNS removeAttributeNode ctLosest matches webkitMatchesSeLector getELementsByTagName 
getELementsByTagNameNS getELementsByYCLassName insertAdjacentELement insertAdjacentText insertAdjacentHTML 
createShadowRoot getDestinationInsertionPoints requestPointerLock getCLientRects getBoundingCLientRect scroLLIntoView 
scrottIntoViewIfNeeded animate remove webkitRequestFutLtScreen webkitRequestFuLtscreen querySeLector querySeLectorALL 
ELEMENT_N0DE ATTRIBUTE_N0ODE TEXT_N0DE CDATA_SECTION_N0DE ENTITY_REFERENCE_NO0DE ENTITY_N0DE PROCESSING_INSTRUCTION_N0DE 
COMMENT_N0DE DO0CUMENT_NODE DOCUMENT_TYPE_N0DE DOCUMENT_FRAGMENT_NODE NOTATION_N0DE DOCUMENT_POSITION_DISCONNECTED 
DOCUMENT_P0SITION_PRECEDING DOCUMENT_POSITION_FOLLOWING DOCUMENT_POSITION_CONTAINS DOCUMENT_P0SITION_CONTAINED_BY 
DOCUMENT_P0SITION_IMPLEMENTATION_SPECIFIC nodeType nodeName baseURI isConnected ownerDocument parentNode parentEtLement 
chitdNodes firstChitd LastChitUd previousSibLing nextSibLUing nodeVaLue textContent hasChiUdNodes normatLize CcLoneNode 
isEquaLUNode isSameNode compareDocumentPosition contains LookupPrefix LookupNamespaceURI isDefauttNamespace insertBefore 
appendChitd replLaceCchitLd removeChitd addEventListener removeEventListener dispatchEvent ” 


可 以 看 到 ， 真 正 的 DOM 元 素 是 非常 庞大 的 ， 因 为 浏览 器 的 标准 就 把 DOM 设计 的 非常 复杂 。 当 我 们 频 
繁 的 去 做 DOM 更 新 ， 会 产生 一 定 的 性 能 问题 。 


而 Virtual DOM 就 是 用 一 个 原生 的 JS 对 象 去 描述 一 个 DOM 节点 ， 所 以 它 比 创建 一 个 DOM 的 代价 要 
小 很 多 。 在 Vue.js 中 ，Virtual DOM 是 用 vNode 这 人 么 一 个 Class 去 描述 ， 它 是 定义 在 


Src/Vcore/vdom/vnode .js 中 的 。 


export default class VNode 
tag: String | void ; 
data: VNodeData | void ; 
children: ?Array<VNode>; 
text: string | void ; 
elm: Node | void ; 
ns: String | void ; 
Context: Component | void; // rendered in this component 'Ss Scope 
key: String | number | void ; 
componentoptions: VNodecomponentoptions | void ; 
componentInstance: Component | void // component instance 
parent: VNode | void; // component placeholder node 


是 SEIEICELNEOYEeicmal 

raw: boolean; // contains raw HTML? (Server onjly) 

SStatlic: boolean; // hoisted static node 

SRootInsert: boolean;， // necessary for enter transition check 
IISComment : boolean; // empty comment placeholder? 

SCloned: boolean; // is a cloned node? 

ISOoOnce: boolean; // ls a VvV-once node? 


asyncFactory: Function | void // async component factory function 
asyncMeta: Object | void ; 

ISAsyncPJlaceholder: boolean ; 

SSsrContext: Object | void ; 

fnContext: Component | void; // real context vm for functional nodes 
fnoptions: ?Componentoptions; // for SSR caching 

fnScopeId: ?String; // functional scope Id Support 


Conmskruc or ( 
tag?: String， 
data?: VNodeData， 
children?: ?Array<VNode>， 
text?3: String， 
elm?: Node， 
Context?: Component， 
componentoptions?: VNodecomponentoOptions， 
asyncFactory?: Function 

) 荆 
this.tag = tag 
this,data = data 
this.children = children 
this,text = text 
this.elm = elm 
this.ns = undefined 
this.context = context 
this,fnContext = undefined 
this,.fnoptions = undefined 
this,fnScopeId = undefined 
this.key = data && data.key 
this,componentoptions = componentOptions 
this.componentInstance = undefined 
this.parent = undefined 
this,raw = false 
thlis.isStatic = false 
this,iISsRootInsert = true 
this.IisComment = false 
this,IsCJloned = false 
thlis.isonce = false 
this.asyncFactory = asyncFactory 
this.asyncMeta = undefined 
this,IsSAsyncPlaceholder = false 


// DEPRECATED: alias for componentInstance for backwards compat , 
/* Istanbul Ignore next */ 
get child (): Component | void 六 

return this,componentInstance 


可 以 看 到 Vue.js 中 的 Virtual DOM 的 定义 还 是 略微 复杂 一 些 的 ， 因 为 它 这 里 包含 了 很 多 Vue,js 的 特 
性 。 这 里 千 万 不 要 被 这 些 茫茫 多 的 属性 吓 到 ， 实 际 上 Vuejs 中 Virtual DOM 是 借鉴 了 一 个 开源 库 
snabbdom 的 实现 ， 然 后 加 入 了 一 些 Vue.js 特色 的 东西 。 我 建议 大 家 如 果 想 深入 了 解 Vue.js 的 Virtual 
DOM 前 不 妨 先 阅 读 这 个 库 的 源码 ， 因 为 它 更 加 简单 和 纯粹 。 


k 实 VNode 是 对 真实 DOM 的 一 种 抽象 描述 ， 它 的 核心 定义 无 非 就 几 个 关键 属性 ， 标 签名 、 数 据 、 子 
点 、 键 值 等 ， 其 它 属性 都 是 都 是 用 来 扩展 VNode 的 灵活 性 以 及 实现 一 些 特殊 feature 的 。 由 于 VNode 
是 用 来 映射 到 真实 DOM 的 浑 染 ， 不 需要 包含 操作 DOM 的 方法 ， 因 此 它 是 非常 轻 量 和 简单 的 。 


Virtual DOM 除了 它 的 数据 结构 的 定义 ， 映 射 到 真实 的 DOM 实际 上 要 经 历 VNode 的 create、diff、 
patch 等 过 程 。 那 么 在 Vue.js 中 ，VNode 的 create 是 通过 之 前 提 到 的 ”createElement 方法 创建 的 ， 我 
们 接 下 来 分 析 这 部 分 的 实现 。 


CreateElement 
Vue.js 利用 createElement 方法 创建 VNode， 它 定义 在 src/core/vdom/create-elemenet.js 中 : 


// wrapper function for providing a more flexible interface 
// without getting yelled at by flow 
export function createElement (人 
context: Component， 
tag: any， 
data: any， 
Childrensaany 
normalizationType: any， 
alwaySNormalize: boolean 
): VNode | Array<VNode> 并 
If (Array.isArray(data) || IsPrimitive(data)) { 
normalizationType = children 
children = data 
data = undefined 
} 
If (isTrue(alwaySsNormalize)) 攻 
normalizationType = ALWAYS_NORMALIZE 
} 


return _createEJlement(context，tag，data，children，normalizationType) 


createElement 方法 实际 上 是 对 _createElement 方法 的 封装 ， 它 允许 传 人 的 参数 更 加 灵活， 在 处 
理 这 些 参数 后 ， 调 用 真正 创建 VNode 的 函数 _createElement 


export function _createElement (人 
context: Component， 
tag2: string | class<Component> | FEunctIion | 0bject， 
data?: VNodeData， 
children?: any， 
normalizationType?: number 
): VNode | Array<VNode> 并 
If (isDef(data) && isDef((data: any),_ ob )) { 
process.env.NODE_ENV !== ' production'”&& warn( 
`“Avoid using observed data object as vnode data: ${tJSON.stringify(data)}yNn ”二 
"Always create fresh vnode data objects in each render! '， 
Context 
) 
return createEmptyVNode( ) 
】} 
// object Syntax in v-bind 
if (IsDef(data) && isDef(data.is)) 区 
tag = data.is 


If (!tag) 
// in case of component :1Ss set to falsy value 
return createEmptyVNode( ) 


} 
// warn against non-primitive Key 
If (process.env.NODE_ENV !== "production”&& 
IsSDef(data) && IsDef(data,.key) && !isPrimitive(data.key) 
) 攻 
if (!_ WEEX || !('@binding'” in data,key)) 
warn( 
'"Avoid using non-primitive Value as key， "+ 
"use stringynumber Value instead 
CoOntext 
) 
】} 
} 


Asupport snogleiunctaonichnaldrenas defaultascopedslot 
If (Array.IisArray(children) && 
typeof children[0] === 'function' 
于 人 
data = data || 全 
data,ScopedSlots ={ default: children[9] } 
children.Jlength = 9 
】} 
If (normalizationType === ALWAYS_NORMALIZE) 区 
children = normalizechildren(children) 
} else if (normalizationType === SIMPLE_NORMALIZE) 革 
children = SimpJeNormalizechildren(children) 
} 
Jet vnode，ns 
If (typeof tag === ' String') 区 
eteetor 
ns = (context.$vnode && context .$vnode,ns) || config.getTagNamespace(tag ) 
If (config.isReservedTag(tag) ) 荆 
// platform built-in elements 
vnode = new VNode( 
config.parsePlatformTagName(tag)，data，children， 
undefined，undefined，context 
) 
} else if (IsDef(Ctor = resolveAsset(context.$options， 'components'，tag))) 并 
// component 
vnode = createCcomponent(Ctor，data，context，children，tag) 
else 1{ 
// unknown or unlisted namespaced elements 
// check at runtime because it may get assigned a_namespace when Its 
// parent normalizes children 
vnode = new VNode( 
tag，data，children， 
undefined，undefined，context 


Telseet 
// direct component options / constructor 


Vvnode = createCcomponent(tag，data，context，children) 


】} 
If (Array,.isArray(vnode)) 攻 


return Vvnode 
} else if (IsDef(vnode)) 六 
If (isDef(ns)) appJyNS(vnode，ns) 
If (isDef(dqata)) registerDeepBindings(datal) 
return Vvnode 
helse { 
return createEmptyVNode( ) 


_createElement 方法 有 5 个 参数 ， context 表示 VNode 的 上 下 文 环 境 ， 它 是 component 类 
型 ; tag 表示 标签 ， 它 可 以 是 一 个 字符 串 ， 也 可 以 是 一 个 component ; data 表示 VNode 的 数 
据 ， 它 是 一 个 _VvNodeData 类 型 ， 可 以 在 flow/vnode,js 中 找到 和 它 的 定义 ， 这 里 先 不 展开 

说 ; children 表示 当前 VNode 的 子 节 点 ， 它 是 任意 类 型 的 ， 它 接 下 来 需要 被 规范 为 标准 的 VNode 
数组 ; normalizationType 表示 子 节点 规范 的 类 型 ， 类 型 不 同 规范 的 方法 也 就 不 一 样 ， 它 主要 是 参 
考 render 画 数 是 编译 生成 的 还 是 用 户 手 罕 的 。 


createElement 画 数 的 流程 略微 有 点 多 ， 我 们 接 下 来 主要 分 析 2 个 重点 的 流程 
规范 化 以 及 VNode 的 创建 。 


children 的 规范 化 


由 于 Virtual DOM 实际 上 是 一 个 树 状 结构 ， 每 一 个 VNode 可 能 会 有 若干 个 子 节点 ， 这 些 子 节点 应 该 也 
是 VNode 的 类 型 。 _createElement 接收 的 第 4 个 参数 children 是 任意 类 型 的 ， 因 此 我 们 需要 把 它们 
规范 成 VNode 类 型 。 


children 的 


这 里 根据 normalizationType 的 不 同 ， 调 用 了 normalizechildren(children) 和 
simpleNormalizechildren(children) 方法 ， 它 们 的 定义 都 在 


SrcVvcore/vdom/Vvhelpers/normalzie-children,.Jjs 中 : 


// The template compiler attempts to minimize the need for normalization by 
// Statically analyzing the template at compile time.， 

0 

// For plain HTML markup，normalization can be completely Skipped because the 
// generated render function is guaranteed to return Array<VNode>， There are 
// two cases where extra normalization Is needed : 


// 1， When the children contains components - because a _ functional component 
// may return an Array instead of a Single root， In this case，just a Simple 
// normalization is needed - if any child is an Array，Wwe flatten the whole 

// thing with Array.prototype.concat. It is guaranteed to be only 1-1level deep 
// because functional components already normalize their own children， 
BeXxpontihunetIonEsrnmpleNormalazechnadrencnaurenec anyy 


for (let = 0) 工 < children,Jength; I++) 
If (Array.IisArray(children[I])) 攻 
return Array.prototype,.concat ,apply([]，children) 


return children 


// 2， When the children contains constructs that always generated nested Arrays， 
// e,g，<template>，<Slot>，Vv-for，or when the children is provided by user 
// with hand-written render functions / JSX， In Such cases a fu1l1 normalization 
// ls needed to cater to al1l possible types of children values ， 
export function normalizechildren (children: any): ?Array<VNode> 革 
return IsPrimitive(children) 
? [createTextVNode(children)] 
: Array,.iIsArray(children) 
? normalizeArrayCchildren(children) 
: undefined 


simpleNormalizechildren 方法 调用 场景 是 _render 画 数 当 本 数 是 编译 生成 的 。 理 论 上 编译 生成 的 
children 都 已 经 是 VNode 类 型 的 ， 但 这 里 有 一 个 例外 ， 束 是 functional component 画 数 式 组 件 
返回 的 是 一 个 数组 而 不 是 一 个 根 节点 ， 所 以 会 通过 Array.prototype.concat 方法 把 整个 

children 数组 打 平 ， 让 它 的 深度 只 有 一 层 。 


normalizechildren 方法 的 调用 场景 有 2 种 ， 一 个 场景 是 render 画 数 是 用 户 手写 的 ， 当 
children 只 有 一 个 节点 的 时 候 ，Vue.js 从 接口 层面 允许 用 户 把 children 写成 基础 类 型 用 来 创建 单 
个 简单 的 文本 节点 ， 这 种 情况 会 调用 createTextVNode 创建 一 个 文本 节点 的 VNode ; 另 一 个 场景 是 
当 编译 slot 、 v-for 的 时 候 会 产生 骨 套 数组 的 情况 ， 会 调用 normalizeArraychildren 方法 ， 

接 下 来 看 一 下 它 的 实现 : 


function normalizeArrayCchildren (children: any，nestedIndex?: string): Array<VNode> 
上 
const res = [] 
let 二 ，c，1lastIndex，】ast 
for (IIL=0;) 工 < children, length; I++) 革 
c = children[I] 
if (IsUndef(c) || typeof c === "boolean') continue 
JastIndex = res,length - 工 
Jast = res[]lastIndex] 
Znested 
if (Array.IsArray(c)) { 
if (c.Jength > 90) 荆 
c = normalizeArrayChildren(c， $ftnestedIndex || ”}》$4I} ) 
// merge adjacent text nodes 
If (isTextNode(c[90]) && IsTextNode(Jlast)) { 
res[JastIndex] = createTextVNode(1last.text + (c[0]: any).text) 
c,.Shift() 


res,.push.apply(res，c) 
} 
} else if (IsPrimitive(c)) 
If (IsTextNode(Jast)) 攻 
// merge adjacent text nodes 
// this ls necessary for SSR hydration because text nodes are 
// essentially merged when rendered to HTML strings 
res[lastIndex] = createTextVNode(Jast.text + C) 
Jelse af (CIE= ) 
// convert primitive to vnode 
res,push(createTextVNode(c) ) 
} 
} else { 
If (ISTextNode(c) && IISsTextNode(1Last)) 区 
// merge adjacent text nodes 
res[lastIndex] = createTextVNode(last,text + c.text) 
Jelse ({ 
上 defauLekeyiftorinested arcray cncenatakelyiogeneratediby vs=fonm) 
If (isTrue(children._ isVLIist) && 
ISDef(c,tag) && 
IsUndef(c.key) && 
IsDef(nestedIndex)) 攻 
c,key =  Vvlist$ftnestedIndex} ${I)} 
} 


res,.push(c ) 


i 


retunn res 


画 Ed| 


normalizeArrayChildren 接收 2 个 参数 ， children 表示 要 规范 的 子 节点 ， nestedIndex 表示 
和 网 套 的 索引 ， 因 为 单个 child 可 能 是 一 个 数组 类 型 。 normalizeArraychildren 主要 的 逻辑 就 是 
逼 历 children ， 获 得 单个 节点 c ， 然 后 对 c 的 类 型 判断 ， 如 果 是 一 个 数组 类 型 ， 则 递 娄 调用 
normalizeArraychildren ; 如果 是 基础 类 型 ， 则 通过 createTextVNode 方法 转换 成 VNode 类 型 ; 
否则 就 已 经 是 VNode 类 型 了 ， 如 果 children 是 一 个 列表 并 且 列 表 还 存在 舱 套 的 情况 ， 则 根据 
nestedIndex 去 更 新 它 的 key。 这 里 需要 注意 一 点 ， 在 通 历 的 过 程 中 ， 对 这 3 种 情况 都 做 了 如 下 处 
理 : 如 果 存 在 两 个 连续 的 text 节点 ， 会 把 它们 合并 成 一 个 text 节点 。 


经 过 对 children 的 规范 化 ， children 变 成 了 一 个 类 型 为 VNode 的 Array。 


VNode 的 创建 


回 到 createElement 本 数 ， 规 范 化 children 后 ， 接 下 来 会 去 创建 一 个 VNode 的 实例 : 


Jet vnode，ns 
If (typeof tag === ' String'") 二 


Letctor 
ns = (context.$vnode && context .,$vnode,.ns) || config.getTagNamespace(tag ) 
If (config.iIisReservedTag(tag) ) 荆 
// plLatform bulilt-In elements 
Vvnode = new VNode( 
config.parsePlatformTagName(tag)，data，children， 
undefined，undefined，context 
) 
} else if (isDef(Ctor = resolveAsset(context,.$options， "components ' ，tag))) 攻 
// component 
Vvnode = createCcomponent(Ctor，data，context，children，tag ) 
Telse 
// unknown or unlisted namespaced elements 
// check at runtime because it may get assigned a_namespace when Its 
// parent normalizes children 
Vvnode = new VNode( 
tag，data，children， 
Undefined，undefined，context 


上 
else 1{ 


// direct component options / constructor 
vnode = createcomponent(tag，data，context，children) 


这 里 先 对 tag 做 判断 ， 如 果 是 string 类 型 ， 则 接着 判断 如 果 是 内 置 的 一 些 节 点 ， 则 直接 创建 一 个 
普通 VNode， 如 果 是 为 已 注册 的 组 件 名 ， 则 通过 createcomponent 创建 一 个 组 件 类 型 的 VNode， 藻 
则 创建 一 个 未 知 的 标签 的 VNode。 如 果 是 tag 一 个 component 类 型 ， 则 直接 调用 
createComponent 创建 一 个 组 件 类 型 的 VNode 节点 。 对 于 _ createcomponent 创建 组 件 类 型 的 
VNode 的 过 程 ， 我 们 之 后 会 去 介绍 ， 本 质 上 它 还 是 返回 了 一 个 VNode。 


人 mr| 


总 结 


那么 至 此 ， 我 们 大 致 了 解 了 _ createElement 创建 VNode 的 过 程 ， 每 个 VNode 有 
children ， children 每 个 元 素 也 是 一 个 VNode， 这 样 就 形成 了 一 个 VNode Tree， 它 很 好 的 描述 
了 我 们 的 DOM Tree。 


回 到 mountcomponent 画 数 的 过 程 ， 我 们 已 经 知道 vm._render 是 如 何 创 建 了 一 个 VNode， 接 下 来 
就 是 要 把 这 个 VNode 泻 染 成 一 个 真实 的 DOM 并 尝 染 出 来 ， 这 个 过 程 是 通过 vm,_update 完成 的 ， 
接 下 来 分 析 一 下 这 个 过 程 。 


update 


Vvue 的 _update 是 实例 的 一 个 私有 方法 ， 它 被 调用 的 时 机 有 2 个 ， 一 个 是 首次 演 染 ， 一 个 是 数据 更 
新 的 时 候 ; 由 于 我 们 这 一 章节 只 分 析 首 次 演 染 部 分 ， 数 据 更 新 部 分 会 在 之 后 分 析 响 应 式 原 理 的 时 候 涉 


及 。 _update 方法 的 作用 是 把 VNode 演 染 成 真实 的 DOM， 它 的 定义 在 


Src/core/instance/1ifecycle,.Jjs 中 : 


Vue.prototype,_update = function (vnode: VNode，hydrating?: boolean) 攻 
const Vvm: Component = this 
const prevE]1 = Vvm.$el 
const prevvnode = vm,_vnode 
const prevActiveInstance = activeInstance 
activeInstance = Vm 
vm,_vnode = vnode 
// Vue.prototype. patch is injected in entry points 
// based on the rendering backend used ， 
If (!prevVnode) 攻 
XLRanatal render 
vm,$el = vm, patch_ (vvm.$el，vnode，hydrating，Talse /” removeonly ”7/) 
Telse 1{ 
// updates 
vm,$el = vm, patch__ (prevvnode，vnode) 
】} 
activeInstance = prevActiveInstance 
// update VUe reference 
If (prevE]1) 攻 


prevE1._ vue = nul1 
】 
If (vm,$e1) 攻 
vm.$el. vvue _ = vm 
】 


允 生 TDacemesEEanmaHOCAnupdatets 有 el asEweiil 

If (vm.,$vnode && vm.$parent && vm.$vnode === Vm.$parent,_vnode) 六 
Vvm,$parent.$el = Vvm.$e] 

】} 

// updated hook ls called by the Scheduler to ensure that children are 

// updated in a parent 's updated hook . 


_update 的 核心 加 是 调用 vm._patch_， 方法 ， 这 个 方法 实际 上 在 不 同 的 平台 ， 比 如 web 和 weex 
上 的 定义 是 不 一 样 的 ， 因 此 在 web 平台 中 它 的 定义 在 src/platforms/web/yruntime/index.js 中 : 


Vue,.prototype._ patch _ _ = inBrowser ? patch : noop 


可 以 看 到 ， 甚 至 在 web 平台 上 ， 是 否 是 服务 端 泻 染 也 会 对 这 个 方法 产生 影响 。 因 为 在 服务 端 演 染 中 ， 
没有 真实 的 浏览 器 DOM 环境 ， 所 以 不 需要 把 VNode 最 终 转 换 成 DOM， 因 此 是 一 个 空 函 数 ， 而 在 浏览 
器 端 浑 染 中 ， 它 指向 了 _ patch 方法 ， 它 的 定义 在 src/platforms/web/yruntime/patch.js 中 : 


Import * as nodeops from "webVvruntime/vnode-ops' 

Import { createPatchFunction } from "core/vdomVpatch 
Import baseModuJles from "core/vdom/Vvmodules/index， 
Import pJatformModuJles from "webVvruntime/Vymodules/Xindex' 


// the directive module Should be applied Last，after al1 
// built-in modules have been app1lied . 
const modules = platformModules.concat(baseModules ) 


export const patch: Function = createPatchFunction({t nodeops，modules }) 


该 方法 的 定义 是 调用 _ createPatchFunction 方法 的 返回 值 ， 这 里 传人 了 一 个 对 象 ， 包含 nodeops 
参数 和 modules 参数 。 其 中 ， nodeo0ps 封装 了 一 系列 DOM 操作 的 方法 ， modules 定义 了 一 些 模 
块 的 钧 子 函 数 的 实现 ， 我 们 这 里 先 不 详细 介绍 ， 来 看 一 下 _createPatchFunction 的 实现 ， 它 定义 在 
src/core/vdom/patch.js 中 : 


const hooks = ['create'， "activate'， "update'， "remove'， 'destroy ] 


export function createPatchFunction (backend) 荆 
下 Ge 蕊 二 写本 
const cbs = 1 


const { modules，nodeops } = backend 


for (IIL=0; 工 < hooks,length; ++iI) 攻 
cbs[hooks[il]] = [ 襄 
for (j =0;) j < modules. length; ++]j) 六 
If (isDef(modules[Jj][hooks[I]])) 攻 
cbs[hooks[I]]j.push(modules[j][Lhooks[i]]) 


入 


return function patch (oldvnode，vnode，hydrating，removeonly) 苹 
If (isUndef(vnode)) 攻 
If (isDef(oldvnode)) invokeDestroyHook(oldvnode ) 
eunan 


Jet IsInitialPatch = false 
const insertedVvnodeQueue = [] 


if (isUndef(oldvnode)) 革 


// empty mount (1Likely as component )，create new root element 
IsSInitialPatch = true 
createEJm(vnode，insertedvnodeQueue ) 
else 1 
const IsSRealEJement = IsDef(oldvnode.nodeType) 
If (1!1iSRealElement && Samevnode(o1ldvnode，vnode)) 革 
// patch existing root node 
patchvnode(oldvnode，vnode，insertedvnodeQueue，removeonly) 
else 1{ 
If (IsSRealLE1Lement ) 攻 
// mounting to a real element 
// check if this is server-rendered content and if we can perform 
// a successful hydration， 
If (01dvnode.nodeType === 1 && 01dvnode,.hasAttribute(SSR_ATTR) ) 攻 
01Ldvnode . removeAttribute(SSR_ATTR) 
hydrating = true 
} 
If (isTrue(hydrating)) 工 
if (hydrate(o1dvnode，vnode，insertedvnodeQueue ) ) { 
invokeInsertHook(vnode，insertedvnodeQueue，true) 
return 01dvnode 
} else if (process,.env,.NODE_ENV !== "production' ) 攻 
warn( 
ie ClaenktsrduecarendueredEvVnreualanDoMELEee snotumatchnnog 
vservVersnrenderedicontermtesanhhs 研 SIakKelyEcausedibyinncorrec 二 
"HTML markup，Tfor exampJle nesting block-Jlevel elements inside ”上 + 
"<p>，or missing <tbody>，Bailing hydration and performing ”+ 
ULCLEenk=srdegrenoer 二 


】} 


// either not server-rendered，or hydration failed . 
/X/ create an empty node and replace It 
olLdvnode = emptyNodeAt(oldVvnode) 


// replacing existing element 
const oldElm = 01dvnode.elm 
const parentElm = nodeops,.parentNode(olLdEJm) 


Acreateunewinode 
CreateEJm( 
Vvnode， 
InsertedVvnodeQueue， 
// extremely rare edge case: do not insert if 01d element is in a 
// leaving transition， Only happens when _ combining transition + 
// keep-alive + HOCS，(#4590 ) 
olLdElm._ leavecb ? null1 : parentEJm， 
nodeops .nextSibJling(oldEJm) 


// update parent placeholder node element，recursively 
If (isDef(vnode.parent)) 攻 
let ancestor = vnode.parent 
const patchable = IsPatchable(vnode) 
while (ancestor) 六 
下 OICLeE 三 贡 9 二 < cebs=destroysienge ;Et 本 是 帮 
cbs.destroy[I](ancestor) 
} 
ancestor .elm = vnode.elm 
If (patchable) 荆 
for (let II= 0; 工 < cbs.create,length; ++I) 攻 
cbs.create[I](emptyNode，ancestor ) 
} 
// #6513 
// invoke insert hooks that may have been merged by create hooks ， 
// e.g,. for directives that Uses the "inserted”"” hook ， 
const insert = ancestor.data.hook.insert 
If (insert.merged) 荆 
// Start at index 1 to avolid re-invoking component mounted hook 
for (let = IT < Insert fns lengthn，+r) 1{ 
Insert ,fns[I]() 


】} 
Telse { 
registerRef(ancestor ) 
ancestor = ancestor .parent 


// destroy 01d node 

If (isDef(parentEJlm)) { 
removevnodes(parentEJm， [oldvnode]，9，0) 

} else if (isDef(oldvnode ,tag)) { 
invokeDestroyHook(oldvnode ) 


InvokeInsertHook(vnode，ijinsertedvnodeQueue，isInitialPatch ) 
return vnode.elm 


createPatchFunction 内 部 定义 了 一 系列 的 辅助 方法 ， 最 终 返 回 了 一 个 patch 方法 ， 这 个 方法 就 
赋值 给 了 vm._update 西数 里 调用 的 vm._patch__ 。 


在 介绍 _ patch 的 方法 实现 之 前 ， 我 们 可 以 思考 一 下 为 何 Vue.js 源码 绕 了 这 么 一 大 圈 ， 把 相关 代码 分 


散 到 各 个 目录 。 因 为 前 面 介 绍 过 ， patch 是 平台 相关 的 ， 在 Web 和 Weex 环境 ， 它 们 把 虚拟 DOM 映 
射 到 “平台 DOM” 的 方法 是 不 同 的 ， 并 且 对 “DOM” 包括 的 属性 模块 创建 和 更 新 也 不 尽 相 同 。 因 此 每 个 


平台 都 有 各 自 的 nodeops 和 modules ， 它 们 的 代码 需要 托管 在 src/platforms 这 个 大 目录 下 。 


而 不 同 平台 的 patch 的 主要 逻辑 部 分 是 相同 的 ， 所 以 这 部 分 公共 的 部 分 托管 在 core 这 个 大 目录 
下 。 差 异化 部 分 只 需要 通过 参数 来 区 别 ， 这 里 用 到 了 一 个 函数 柯 里 化 的 技巧 ， 通 过 
createPatchFunction 把 差异 化 参数 提前 固化 ， 这 样 不 用 每 次 调用 patch 的 时 候 都 传递 
nodeops 和 modules 了 ， 这 种 编程 技巧 也 非常 值得 学 习 。 


在 这 里 ， nodeops 表示 对 “平台 DOM” 的 一 些 操作 方法 ， modules 表示 平台 的 一 些 模块 ， 它 们 会 在 
整个 _ patch 过程 的 不 同 阶段 执行 相应 的 钧 子 酚 数 。 这 些 代码 的 具体 实现 会 在 之 后 的 章节 介绍 。 


回 到 patch 方法 本 身 ， 它 接收 4 个 参数 ， oldvnode 表示 旧 的 VNode 节点 ， 它 也 可 以 不 存在 或 者 是 
一 个 DOM 对 象 ; vnode 表示 执行 _render 后 返回 的 VNode 的 节点 ; hydrating 表示 是 否 是 服 
务 端 演 染 ; removeonly 是 给 transition-group 用 的 ， 之 后 会 介绍 。 


patch 的 逻辑 看 上 去 相对 复杂 ， 因 为 它 有 着 非常 多 的 分 支 逻 辑 ， 为 了 方便 理解 ， 我 们 并 不 会 在 这 里 
介绍 所 有 的 逻辑 ， 仅 会 针对 我 们 之 前 的 例子 分 析 它 的 执行 逻辑 。 之 后 我 们 对 其 它 场景 做 源码 分 析 的 时 
候 会 再 次 回顾 patch 方法 。 


先 来 回顾 我 们 的 例子 : 


var app = new Vue({f 
6 关 app 
render: function (CreateELement ) 1 
return createEJlement('div'，({ 
ass 人 
daDpDn 
】 
}，this,message) 
】， 
data: 
message: "Hel1lo Vuel 
} 
】) 


然后 我 们 在 vm._update 的 方法 里 是 这 么 调用 patch 方法 的 : 


macaailsenden 
vm.$el = vm, patch__ (vm.$el，vnode，hydrating，Talse /” removeonly ”7/) 


结合 我 们 的 例子 ， 我 们 的 场景 是 首次 泻 染 ， 所 以 在 执行 patch 画 数 的 时 候 ， 传 人 的 vm.$el 对 应 的 
是 例子 中 id 为 app 的 DOM 对 象 ， 这 个 也 就 是 我 们 在 idex.html 模板 中 写 的 <div id="app"> ， 
vm,$el 的 赋值 是 在 之 前 mountComponent 本 数 做 的 ， vnode 对 应 的 是 调用 render 画 数 的 返 
值 ， hydrating 在 非 服 务 端 演 染 情况 下 为 false， removeonly 为 false。 


确定 了 这 些 人 参 后 ， 我 们 回 到 patch 本 数 的 执行 过 程 ， 看 几 个 关键 步骤 。 


回 ]| 


const IsSRealJEJement = IsDef(oldvnode.nodeType ) 
If (!isRealEJement && Samevnode(o1ldvnode，vnode)) 攻 
// patch existing root node 


patchvnode(o1dvnode，vnode，insertedvnodeQueue，removeonly ) 
Telse 1 
If (IsSRealLE1Lement ) 六 
// mounting to a real element 
// check if this is Server-rendered content and if we can perform 
// a Successful hydration， 
If (oldvnode.nodeType === 1 && 01dvnode.hasAttribute(SSR_ATTR) ) 攻 
olJdVvnode .removeAttribute(SSR_ATTR ) 
hydrating = true 
】} 
If (isTrue(hydrating)) 革 
If (hydrate(o1dvnode，vnode，insertedvnodeQueue ) ) { 
invokeInsertHook(vnode，insertedvnodeQueue，true) 
return 01dvnode 
} else if (process,env,.NODE_ENV !== "production') 六 
warn( 
nnecnenkcssidewrendenedeEVmnteualaDOMEEEeeeswnotmatchang 十 
iserversrenauereuconecencnnsEisRlnkKelyEcausedibpyencornrec 十 
HTMIWmarmrkupA forexamplenestangiblockz=leveielenenktsansride + 
"<p>，or missing <tbody>， Bailing hydration and performing ”二 
“TULL Clientsside render.,， 


// either not server-rendered，or hydration failed . 
// create an empty node and replace it 
oldvnode = emptyNodeAt(oldvnode) 


// replacing existing element 
const oldEJlm = 01dvnode .elm 
const parentEJlm = nodeops.parentNode(olLdE1lLm) 


// create new node 
CreateEJm( 
Vvnode， 
insertedvnodeQueue， 
// extremely rare edge case: do not insert if ol1d elLement is in a 
// leaving transition， only happens when combjining transition + 
// keep-alive + HOCS，(#4590 ) 
olJdEJm._ leavecb ? nul1 : parentEJm， 
nodeops .nextSibJling(oldEJm) 


由 于 我 们 传 大 的 oldvnode 实际 上 是 一 个 DOM container， 所 以 isRealElement 为 true， 接 下 来 又 
通过 emptyNodeAt 方法 把 oldvnode 转换 成 VNode 对 象 ， 然 后 再 调用 _ createElm 方法 ， 这 个 
方法 在 这 里 非常 重要 ， 来 看 一 下 它 的 实现 : 


function createElm (人 


VvVnode， 

InsertedvVnodeQueue， 

parentEJLm， 

refEJm， 

nested ， 

OwnerArray， 

Index 

{ 

If (isDef(vnode.elm) && IsDef(ownerArray)) { 
// This vnode was used in a previous render'! 
// now it's used as a_new node，overwriting its elm would cause 
// potential patch errors down the road when it's used as an Insertion 
// reference node.， Instead，we clone the node on-demand before creating 
/assocratediDOMielemenme fo te 
vnode = ownerArray[index] = cloneVvVNode(vnode) 


vnode.ISsRootInsert = !nested // for transition enter check 
If (createCcomponent(vnode，insertedvnodeQueue，parentE1Im，refEJIm) ) 攻 
retunrn 


const data = Vvnode .data 
const children = vnode,children 
const tag = vnode .tag 
if (IsDef(tag)) 攻 
If (process,.env.NODE_ENV !== "production' ) 革 
If (data && data.pre) 革 
creatingEJmInVPre++ 
If (IsUnknownEJement(vnode，creatingEJlmInVPre)) { 
warn( 
UnmknownecustcomEelement < EtagEr > dadiyOU 十 
uregnrsEercnesecomponencsconrectlyzEomcecursaveenconmponents aa 二 
imakessure ieoprovidencneannamne Optronaa 
Vvnode ,context 


vnode.elm = vnode.ns 
? node0ps .createElementNS(vnode.ns，tag) 
nodeops ,createEJement(tag，vnode) 
SetScope(vnode) 


/* Istanbul 1Ignore 工 */ 

If (WEEX _ _ ) 攻 
LA 

helse 1{ 
createchildren(vnode，children，insertedvnodeQueue ) 
if (isDef(data)) { 


invokeCreateHooks(vnode，insertedvnodeQueue ) 


Insert(parentElm，vnode.elm，refE1lLm) 

】} 

If (process,.env.NODE_ENV !== "production”&& data && data.pre) 攻 
creatingEJlImInVPre-- 

】} 


} else if (isTrue(vnode.IsComment)) { 
Vvnode.elm = nodeops.createCcomment(vnode .text) 
Insert(parentEJm，Vvnode.elm，refEJlm) 

helse 
Vvnode.elm = nodeops.createTextNode(vnode .text) 
Insert(parentEJm，Vvnode.elm，refE]lm) 


createElm 的 作用 是 通过 虚拟 节点 创建 真实 的 DOM 并 插 和 人 到 它 的 父 世 点 中 。 我 们 来 看 一 下 它 的 一 
些 关 键 罗 和 辑 ， createcomponent 方法 目的 是 尝试 创建 子 组 件 ， 这 个 逻辑 在 之 后 组 件 的 章节 会 详细 介 
绍 ， 在 当前 这 个 case 下 它 的 返回 值 为 false ; 接 下 来 判断 vnode 是 否 包含 ttg， 如 果 包含 ， 移 简单 对 
tag 的 合法 性 在 非 生 产 环境 下 做 核验 ， 看 是 否 是 一 个 合法 标签 ; 然后 再 去 调用 平台 DOM 的 操作 去 创建 


一 个 占 位 符 元 素 。 


vnode.elm = vnode.ns 
? node0ps .createElementNS(vnode.ns，tag ) 
: nodeops.createElement(tag，vnode) 


接 下 来 调用 _ createchildren 方法 去 创建 子 元 素 : 


createchildren(vnode，children，insertedvnodeQueue ) 


function createchildren (vnode，children，insertedVnodeQueue) 1 
if (Array.IsArray(children)) 革 
If (process,.env.NODE_ENV !== "production' ) 革 
checkDupJlicateKkeys(children) 


】} 
for (let IIL= 0;) 工 < children.Jlength; ++I) { 


createElm(children[I]，jinsertedvnodeQueue，vnode,.elm，nul1，true，children， 


】} 


} else if (isPrimitive(vnode .text)) { 
nodeops.appendchild(vnode.elm，nodeops ,createTextNode(String(vnode.text))) 


工 


createchildren 的 逻辑 很 简单 ， 实 际 上 是 逗 历 子 虚 拟 节点 ， 递 妇 调 用 _ createElm ， 这 是 一 种 常用 
的 深度 优先 的 有 逼 历 算法 ， 这 里 要 注意 的 一 点 是 在 有 逗 历 过 程 中 会 把 vnode.elm 作为 父 容器 的 DOM 节 
点 占 位 符 传 人 。 


接着 再 调用 invokecreatehooks 方法 执行 所 有 的 create 的 钧 子 并 把 vnode push 到 


InsertedvnodeQueue 中 。 


If (isDef(data)) 革 
InvokeCreateHooks(vnode，insertedvnodeQueue ) 


function InvokecreateHooks (vnode，insertedvnodeQueue) 并 

for (let L= 0;) 工 < cbs.create. length; ++I) 革 
cbs.create[I](emptyNode，Vvnode) 

】} 

奔 = vnode.data.hook // Reuse variab]le 

If (isDef(I)) 攻 
If (isDef(Ii.create)) II.create(emptyNode，vnode ) 
If (isDef(Ii.insert)) insertedvnodeQueue.push(vnode ) 


最 后 调用 insert 方法 把 DoM 揪 入 到 父 节点 中 ， 因 为 是 递归 调用 ， 子 元 素 会 优先 调用 insert ， 
所 以 整个 vnode 树 节 点 的 插 和 人 顺序 是 先 子 后 父 。 来 看 一 下 insert 方法 ， 它 的 定义 在 
SrcVvcore/vdom/Vpatch .js 此 5 


insert(parentEJm，Vvnode.elm，refEJlm) 


fiunctaonmnsecttparemesnelnmsanety) 归 人 
If (IsDef(parent )) 
If (IsDef(ref)) 
If (ref,.parentNode === parent) { 
nodeops.insertBefore(parent，elm，ref ) 
由 CISe 下 
nodeops.appendCchild(parent，elm) 


insert 逻辑 很 简单 ， 调 用 一 些 nodeops 把 子 节 点 插入 到 父 节 点 中 ， 这 些 辅助 方法 定义 在 


Src/Vplatforms/webVvruntime/node-ops,js 中 : 


export function insertBefore (parentNode: Node，newNode: Node，referenceNode: Node) 


{ 


parentNode.insertBefore(newNode，referenceNode ) 


export function appendchild (node: Node，child: Node) 1 
node.appendChild(child) 
】} 


直 ES 


其 实 就 是 调用 原生 DOM 的 API 进行 DOM 操作 ， 看 到 这 里 ， 很 多 同学 习 然 大 司 ， 原 来 Vue 是 这 样 动 
态 创建 的 DOM。 


在 _ createElm 过 程 中 ， 如 果 vnode 节点 如 果 不 包含 tag ， 则 它 有 可 能 是 一 个 注释 或 者 纯 文 本 节 
点 ， 可 以 直接 插入 到 父 元 素 中 。 在 我 们 这 个 例子 中 ， 最 内 层 就 是 一 个 文本 vnode ， 它 的 text 值 取 
的 就 是 之 前 的 this,.message 的 值 Hello vuel! 。 


再 回 到 patch 方法 ， 首 次 演 染 我 们 调用 了 _ createElm 方法 ， 这 里 传人 的 parentElm 是 
oldvnode.elm 的 父 元 素 ， 在 我 们 的 例子 是 衣 为 #app div 的 父 元 素 ， 也 就 是 Body ; 实际 上 整个 过 
程 就 是 递归 创建 了 一 个 完整 的 DOM 树 并 插 人 到 Body 上 。 


最 后 ， 我 们 根据 之 前 递归 createElm 生成 的 _vnode 播 入 顺序 队列 ， 执 行 相关 的 insert 钩子 函 
数 ， 这 部 分 内 容 我 们 之 后 会 详细 介绍 。 


结 


|w 
E 


4 


那么 至 此 我 们 从 主线 上 把 模板 和 数据 如 何 泻 染 成 最 终 的 DOM 的 过 程 分 析 完 毕 了 ， 我 们 可 以 通过 下 图 更 
直观 地 看 到 从 初始 化 Vue 到 最 终 演 染 的 整个 过 程 。 


t 


: render 


我 们 这 里 只 是 分 析 了 最 简单 和 最 基础 的 场景 ， 在 实际 项 目 中 ， 我 们 是 把 页 面 拆 成 很 多 组 件 的 ，Vue 另 
一 个 核心 思想 就 是 组 件 化 。 那 么 下 一 章 我 们 束 来 分 析 Vue 的 组 件 化 过 程 。 


组 件 化 


Vue.js 另 一 个 核心 思想 是 组 件 化 。 所 谓 组 件 化， 就 是 把 页 面 拆 分 成 多 个 组 件 (componenbD， 每 个 组 件 依 
赖 的 CSS、JavaScript、 模 板 、 图 片 等 资源 放 在 一 起 开发 和 维护 。 组 件 是 资源 独立 的 ， 组 件 在 系统 内 部 
可 复 有 用， 组件 和 组 件 之 间 可 以 花 套 。 

我 们 在 用 Vue.js 开发 实际 项 目的 时 候 ， 就 是 像 搭 积 木 一 样 ， 编 写 一 堆 组 件 拼 装 生 成 页 面 。 在 Vue.js 的 
官网 中 ， 也 是 花 了 大 篇 幅 来 介绍 什么 是 组 件 ， 如 何 编写 组 件 以 及 组 件 拥有 的 属性 和 特性 。 


那么 在 这 一 章节 ， 我 们 将 从 源码 的 角度 来 分 析 Vue 的 组 件 内 部 是 如 何 工 作 的 ， 只 有 了 解 了 内 部 的 工作 
原理 ， 才 能 让 我 们 使 用 它 的 时 候 更 加 得 心 应 手 。 


接 下 来 我 们 会 用 Vue-cli 初始 化 的 代码 为 例 ， 来 分 析 一 下 Vue 组 件 初 始 化 的 一 个 过 程 。 


Import Vue from 'Vue' 
Import App from ",/App,.Vvue' 


Var app = new Vue({ 
el:  "'#app '， 
// 这 里 的 h 是 createElement 方法 
render: h => h(App) 

了]) 


这 段 代 码 相 信 很 多 同学 都 很 束 悉 ， 它 和 我 们 上 一 章 相同 的 点 也 是 通过 render 画 数 去 泻 染 的 ， 不 同 的 
这 次 通过 createElement 传 的 参数 是 一 个 组 件 而 不 是 一 个 原生 的 标签 ， 那 么 接 下 来 我 们 就 开始 分 析 
这 一 过 程 。 


createComponent 


上 一 章 我 们 在 分 析 _ createElement 的 实现 的 时 候 ， 它 最 终 会 调用 _createElement 方法， 其 中 有 
一 段 逻 辑 是 对 参数 tag 的 判断 ， 如 果 是 一 个 普通 的 html 标签 ， 像 上 一 章 的 例子 那样 是 一 个 普通 的 
div， 则 会 实例 化 一 个 普通 VNode 节点 ， 否 则 通过 createcomponent 方法 创建 一 个 组 件 VNode。 


If (typeof tag === ' String'") 六 
let Ctor 
ns = (context.$vnode && context ,$vnode,.ns) || config.getTagNamespace(tag ) 


If (config.isReservedTag(tag) ) 荆 
// platform built-in elements 
vnode = new VNode( 
config,.parsePlatformTagName(tag)，data，children， 
undefined，undefined，context 
) 
} else if (isDef(Ctor = resolveAsset(context,$options， "components ，tag))) 攻 
// component 
Vvnode = createCcomponent(Ctor，data，context，children，tag ) 
else 
// unknown or unlisted namespaced elements 
// check at runtime because It may get assigned a_namespace when its 
// parent normalizes children 
Vvnode = new VNode( 
tag，data，children， 
undefined，undefined，context 


】} 
小 ellise 环 


// direct component options / constructor 
vnode = createCcomponent(tag，data，context，children) 


在 我 们 这 一 章 传人 的 是 一 个 App 对 象 ， 它 本 质 上 是 一 个 component 类型， 那么 它 会 走 到 上 述 代 码 的 
else 逻辑 ， 直 接 通 过 createcomponent 方法 来 创建 vnode 。 所 以 接 下 来 我 们 来 看 一 下 
createComponent 方法 的 实现 ， 它 定义 在 src/core/vdom/ycreate-component .js 文件 中 : 


export function createCcomponent (人 
Ctor: ClLass<Component> | Function | Object | void， 
data: ?3VNodeData， 
COontexe: conmponeme: 
children: ?Array<VNode>， 
ageSsrng 
): VNode | Array<VNode> | void 世 
If (isUndef(Ctor)) 芒 
return 


CreateCOomPponent 


const basector = context,$options,_base 


// plalin options object: turn it into a constructor 
If (Isobject(Ctor)) 攻 
Ctor = basector .extend(Ctor ) 


} 
// if at thlis stage it's not a constructor or an async component factory， 
// reject， 
If (typeof Ctor !== 'function') 革 

If (process ,envV,.NODE_ENV !== "production' ) 攻 

warn( ` Invalid Component definition: ${fString(Ctor)} ，context) 

】} 

eurn 
} 


// async component 
Jet asyncFactory 
If (isuUundef(Ctor .cid)) 革 
asSyncFactory = Ctor 
Ctor = resolveAsyncComponent (asyncFactory，basector，context) 
二 (Ctor === Undefined) 攻 
// return a placeholder node for async component，which is rendered 
// as a comment node but preserves all the raw information for the node ， 
// the information will be used for async server-rendering and hydration， 
return createAsyncPJlaceholder( 
asyncFactory， 
datay 
Context， 
children， 
tag 


data = data || 全 


// resolve constructor options in case global mixins are applied after 
// component constructor creation 
resolveCconstructoroptions(Ctor ) 


// transform component VvV-model data into props & events 
If (IsDef(data.model)) 革 
transformModel(Ctor .options，data) 


// extract props 


const propsData = extractPropsFromVNodeData(data，Ctor，tag ) 


// functional component 
If (IsTrue(Ctor ,options .functional)) 革 


createComponent 


return createFunctionalComponent(Ctor，propsData，data，context，children) 


// extract 1Listeners，Since these needs to be treated as 
// child component 1isteners instead of DOM 1Listeners 
const Jisteners = data,on 

// replace with 1Listeners with .native modifier 

// So it gets processed during parent component patch ， 
data,.on = data.nativeon 


If (isTrue(Ctor,options.abstract)) { 
// abstract components do not keep_ anything 
// other than props & 1isteners & Slot 


// work around flow 
const Slot = data.Sslot 
data = 1{} 
TGSTlot) 下 人 

data.Slot = Slot 


// instal1 component management hooks onto the placeholder node 
Instal]lComponentHooks(data) 


// return a placeholder vnode 

const name = Ctor.options .name || tag 

const Vvnode = new VNode( 
`“Vue-component -${fCtor.cid}$ftname ?3  -$tname} ” :  } 
data，undefined，undefined，undefined，context， 
CEorpropsDacaanseners agechidnenm 
aSyncFactory 


weexnspecifacoanvokenrecycleslast optanmzediOrerndem tunctaon or 
// extracting cel1-sJlot temp]ate， 
// https://github ,com/Hanks10100/weex-native-directive/tree/master/Vcomponent 
Tstanbulwagnonesaf > 
(ESEWEEX CSSRecyclablecomnponene(tynode) 放 是 
return renderRecycJlab1lecomponentTemp1late(vnode) 


return vnode 


可 以 看 到 ， createcomponent 的 逻辑 也 会 有 一 些 复 杂 ， 但 是 分 析 源 码 比 较 推 荐 的 是 只 分 析 核 心 流 
程 ， 分 支流 程 可 以 之 后 针对 性 的 看 ， 所 以 这 里 针对 组 件 泻 染 这 个 case 主要 就 3 个 关键 步骤 : 


构造 子 类 构造 西数 ， 安 装 组 件 钩子 西数 和 实例 化 vnode 。 


Cn 
| 


const basecCtor = context,$options,_base 


帮 全 piamunEopEanomsEobyject umnEtnEOEEaEconsnucton 
1 (Isobject(Ctor)) 革 
Ctor = baseCctor ,extend(Ctor ) 


我 们 在 编写 一 个 组 件 的 时 候 ， 通 常 都 是 创建 一 个 普通 对 象 ， 还 是 以 我 们 的 App.vue 为 例 ， 代 码 如 下 : 
Import Hellowor]ld from '",/VcomponentSs/VHe1L1LowWor1d 


export default 1{ 
name: "app'， 
Components: { 

Hel11Lowor1ld 


这 里 export 的 是 一 个 对 象 ， 所 以 createcomponent 里 的 代码 逻辑 会 执行 到 
basector .extend(Ctor) ， 在 这 里 basector 实际 上 就 是 Vue， 这 个 的 定义 是 在 最 开始 志 始 化 Vue 
的 阶段 ， 在 src/core/gLlobal-api/index.js 中 的 initGlobalAPI 本 数 有 这 么 一 段 逻 辑 : 


// this is used to identify the ”base"” constructor to extend al1 plain-object 
// components with In Weex's multi-instance Scenar1Ios ， 
Vue,options,_base = Vue 


细心 的 同学 会 发 现 ， 这 里 定义 的 是 _vue.option ， 而 我 们 的 createcomponent 取 的 是 
context .$options ， 实际 上 在 src/core/instance/init.js 里 Vue 原型 上 的 _init 本 数 中 有 这 
么 一 段 逻 辑 : 


vm.$options = mergeoptions( 
resolveConstructoroptions(vm,.constructor )， 
options || {j， 
Vm 


这 样 就 把 Vue 上 的 一 些 option 扩展 到 了 vm.$option 上 ， 所 以 我 们 也 就 能 通过 vm.$options._base 
拿 到 Vue 这 个 构造 画 数 了 。 mergeoptions 的 实现 我 们 会 在 后 续 章 节 中 具体 分 析 ， 现 在 只 需要 理解 它 
的 功能 是 把 Vue 构造 本 数 的 options 和 用 户 传人 的 options 做 一 层 合并 ， 到 vm.$options 上 。 


在 了 解 了 _ basector 指向 了 Vue 之 后 ， 我 们 来 看 一 下 _Vvue .extend 本 数 的 定义 ， 在 
src/core/global-api/extend.js 中 。 


* Class Inheritance 


0 
Vue.extend = function (extendoptions: Object): Function 攻 
extendoptions = extendoptions || 人 总 


const Super = this 
const SuperId = Super .cid 
const cachedctors = extendoptions,_Ctor || (extendoptions,_Ctor = 1{)) 
If (cachedCctors[SuperId]) 
return cachedctors[SuperId] 


】} 
const name = extendoptions .name || Super.options .name 
If (process.env.NODE_ENV !== "production'”&& name) 


ValidatecomponentName(name ) 


const Sub = function VueCcomponent (options) 荆 
this._ init(options ) 
】} 
Sub .prototype = 0bject.create(Super.prototype) 
Sub .prototype,.constructor = Sub 
Sub .cid = cid++ 
Sub .options = mergeoptions( 
Super .options， 
extendoptions 


) 
Sub['super '] = Super 


// For props and computed propertilies，we define the proxy getters on 
// the Vue instances at extenslion time，on the extended prototype.， This 
// avoilids Object.defineProperty calls for each instance created . 
If (Sub.options.props) 六 
InitProps(Sub) 
】} 
If (Sub.options.computed) 荆 
InitComputed(Sub) 


// allow further extenSsion/Xmixin/XplLugin Usage 
Sub .extend = Super ,extend 

Sub .mixin = Super .mixin 

Sub .Use = Super.use 


// create asset registers，So extended classes 
// can have thelir private assets too， 
ASSET_TYPES .forEach(function (type) 并 
Sub[type] = Super[type] 
】) 
// enable recursive Self-lIookup 
If (name) 
Sub.options.components[name] = Sub 


// keep a_ reference to the super options at extenslion time ， 

// later at instantiation we can check If Super's options have 
// been Updated . 

Sub .Superoptions = Super,options 

Sub .extendoptions = extendoptions 

Sub .sealedoptions = extend({}，Sub.options ) 


// cache constructor 
cachedCctors[SuperId] = Sub 
return Sub 


Vue.extend 的 作用 就 是 构造 一 个 vue 的 子 类 ， 它 使 用 一 种 非常 经 典 的 原型 继承 的 方式 把 一 个 纯 对 
象 转换 一 个 继承 于 vue 的 构造 器 Sub 并 返回 ， 然 后 对 Sub 这 个 对 象 本 身 扩展 了 一 些 属性 ， 如 扩 
展 options 、 诡 加 全 局 API 等 ; 并 且 对 配置 中 的 props 和 computed 做 了 初始 化 工作 ; 最 后 对 于 
这 个 sub 构造 画 数 做 了 缓存 ， 避 免 多 次 执行 vue.extend 的 时 候 对 同一 个 子 组 件 重 复 构造 。 


这 样 当 我 们 去 实例 化 sub 的 时 候 ， 就 会 执行 this,，init 逻辑 再 次 走 到 了 vue 实例 的 初始 化 逻 
辑 ， 实 例 化 子 组 件 的 逻辑 在 之 后 的 章节 会 介绍 。 


const Sub = function VueCcomponent (options) { 
this,_ init(options ) 


安装 组 件 钧 子 国 数 


// instal1 component management hooks onto the placeholder node 


InstalJComponentHooks(data) 


我 们 之 前 提 到 Vue.js 使 用 的 Virtual DOM 参考 的 是 开源 库 snabbdom， 它 的 一 个 特点 是 在 VNode 的 
patch 流程 中 对 外 暴露 了 各 种 时 机 的 钧 子 函 数 ， 方 便 我 们 做 一 些 额外 的 事情 ，Vue.js 也 是 充分 利用 这 一 
点 ， 在 初始 化 一 个 Component 类 型 的 VNode 的 过 程 中 实现 了 几 个 钧 子 函 数 : 


const componentVNodeHooks = { 
init (vnode: VNodewWithData，hydrating: boolean): ?boolean 攻 
人 
vnode,. componentInstance && 
!vnode .componentInstance._ isDestroyed && 
vnode ,data.keepAlLive 
) 荆 
// kept-alive components，treat as a patch 
const mountedNode: any = Vvnode // work around flow 
componentVNodeHooks.prepatch(mountedNode，mountedNode ) 
hh else ({ 


const child = vnode.componentInstance = createCcomponentInstanceForvnode( 
Vvnode， 
activeInstance 
) 
child,.$mount(hydrating ? vnode.elm : undefined，hydrating) 
】} 
】， 


prepatch (oldvnode: MountedCcomponentVNode，vnode: MountedComponentVNode ) 二 
const options = vnode.componentoptions 
const child = vnode,.componentInstance = 01dvnode.componentInstance 
updatechildCcomponent( 
child， 
options.propsData，// updated props 
options.1isteners，// updated listeners 
vnode，V// new parent vnode 
options,children // new children 
) 
}， 


Insert (vnode: MountedCcomponentVNode) 
const { context，componentInstance } = vnode 
If (!componentInstance,_ IsMounted) 攻 
componentInstance,_ isMounted = true 
calJIHook(componentInstance， 'mounted ' ) 
】} 
If (vnode.data.keepAlive) 攻 
If (context._ IsMounted) 攻 
// vue-router#1212 
// During updates，a kept-alive component 's _ child components may 
// change，Sso directly walking the tree here may call activated hooks 
// on incorrect children， Instead we push them into aa queue which will 
// be processed after the whole patch process ended . 
queueActivatedComponent(componentInstance ) 
Jelse 
activatechildCcomponent(componentInstance，true /” direct */) 


}， 


destroy (vnode: MountedComponentVNode ) 攻 
const { componentInstance } = vnode 
If (!componentInstance,_ isDestroyed) 革 
If (!vnode.data.keepAlive) 攻 
componentInstance.$destroy() 
和 else 1{ 
deactivatechildCcomponent(componentInstance，true / 作 direct ”1/) 


const hooksToMerge = 0bject.keys(componentVNodeHooks ) 


function installLIComponentHooks (data: VNodeData) 攻 

const hooks = data,hook || (data.hook = {}) 

for (let IL = 0; 工 < hooksToMerge.length; I++) { 
const key = hooksToMerge[I] 
const existing = hooks[key] 
const toMerge = componentVNodeHooks[key] 
If (existing !== toMerge && !(existing && existing._merged)) 攻 

hooks[key] = existing ? mergeHook(toMerge，existing) : toMerge 


hunmctaonmwnmerogeHookkrTEanyAE22 any)EUnmCEIOm 

const merged = (a，b) => 六 
// flow comp1lains about extra args which is why we use any 
f1(a， b) 
f2(a，b) 

} 

merged,， merged = true 

return merged 


整个 Instal]lComponentHooks 的 过 程 就 是 把 componentVNodeHooks 的 钧 子 范 数 合并 到 
data.hook 中 ， 在 VNode 执行 patch 的 过 程 中 执行 相关 的 钩子 本 数 ， 具 体 的 执行 我 们 稍 后 在 介绍 
patch 过 程 中 会 详细 介绍 。 这 里 要 注意 的 是 合并 策略 ， 在 合并 过 程 中 ， 如 果 某 个 时 机 的 钧 子 已 经 存 
在 data.hook 中 ， 那 么 通过 执行 mergeHook 画 数 做 合并 ， 这 个 逻辑 很 简单 ， 就 是 在 最 终 执 行 的 时 
候 ， 依 次 执行 这 两 个 钩子 函数 即 可 。 


实例 化 VNode 


const name = Ctor.options .name || tag 

const vnode = new VNode( 
LVuUescomponemts$ftCctorcadhbtnanee 2 tnameh 
data undefined undefined， undefIned， context， 
(CEOT popsDatalmseenmers iag Chaalidrem ay 
asyncFactory 


) 


return vnode 


最 后 一 步 非 常 简 单 ， 通 过 new VvNode 实例 化 一 个 _vnode 并 返回 。 需 要 注意 的 是 和 普通 元 素 节 点 的 
vnode 不 同 ， 组 件 的 vnode 是 没有 children 的 ， 这 点 很 关键 在 之 后 的 patch 过 程 中 我 们 会 
再 提 。 


结 
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这 一 节 我 们 分 析 了 _ createcomponent 的 实现 ， 了 解 到 它 在 泻 染 一 个 组 件 的 时 候 的 3 个 关键 逻辑 : 构 
造 子 类 构造 本 数 ， 安装 组 件 钧 子 范 数 和 实例 化 vnode 。 createCcomponent 后 返回 的 是 组 件 

Vvnode ， 它 也 一 样 走 到 vm,_uUpdate 方法 ， 进而 执行 了 patch 本 数 ， 我 们 在 上 一 章 对 patch 酚 
数 做 了 人 简单 的 分 析 ， 那 么 下 一 节 我 们 会 对 它 做 进一步 的 分 析 。 


patch 


通过 前 一 章 的 分 析 我 们 知道 ， 当 我 们 通过 createcomponent 创建 了 组 件 VNode， 接 下 来 会 走 到 
vm,_update ， 执 行 vm. patch_ ”去 把 VNode 转换 成 真正 的 DOM 节点 。 这 个 过 程 我 们 在 前 一 章 
已 经 分 析 过 了 ， 但 是 针对 一 个 普通 的 VNode 节点 ， 接 下 来 我 们 来 看 看 组 件 的 VNode 会 有 哪些 不 一 样 的 
地 方 。 


patch 的 过 程 会 调用 _ createElm 创建 元 素 节 点 ， 回 顾 一 下 _createElm 的 实现 ， 它 的 定义 在 
src/core/vdom/patch.js 中 : 


function createElm (人 
Vvnode， 
InsertedvnodeQueue， 
parentE]Jm， 
refE1Lm， 
nested ， 

OwnerArray， 
Index 

) 有 st 
CA 
If (createCcomponent(vnode，insertedvnodeQueue，parentE1Im，refEJIm) ) 蔷 

return 


j 
7 


createComponent 


我 们 删 掉 多 余 的 代码 ， 只 保留 关键 的 逻辑 ， 这 里 会 判断 createComponent(vnode， 
InsertedvnodeQueue，parentElm，refEJlm) 的 返回 值 ， 如 果 为 true 则 直接 结束 ， 那么 接 下 来 看 
一 下 _createcomponent 方法 的 实现 : 


function createCcomponent (vnode，jinsertedvnodeQueue，parentElm，refEJm) 攻 
let 工 = vnode.data 
If (isDef(i)) 攻 
const IsSReactivated = IsDef(vnode.componentInstance) && 1 工 .keepAJive 
if (isDef(iI = 寺 .hook) && isDef(I = 1.,init)) { 
I(vnode，false /* hydrating */) 


// after calling the jinit hook，if the vnode ls a child component 

ZEEEShiouldvVescreacedUEacnadnskcanceamudlmouncedntes cneschadd 

// component also has set the placeholder vnode's elnm. 

// in that case we can just return the element and be done. 

If (isDef(vnode.componentInstance)) { 
initComponent(vnode，insertedVvnodeQueue ) 
insert(parentEJm，vnode.eJlm，refEJm) 


If (isTrue(ISReactivated) ) 荆 
reactivatecomponent(vnode，insertedVvnodeQueue，parentElm，refE1lm) 


】} 


retunnatrue 


createCcomponent 函数 中 ， 首先 对 vnode.data 做 了 一 些 判 断 : 


let 工 = vnode.data 
If (IsDef(I)) { 
5 
if (IsDef(I = 1I.hook) && isDef(I = 工 .init)) 革 
ICvnode，false /* hydrating *7) 
CA 
】} 
[Oh 


如 果 vnode 是 一 个 组 件 VNode， 那 么 条 件 会 满足 ， 并 且 得 到 1 就 是 init 钩子 函数 ， 回 顾 贞 
我 们 在 创建 组 件 VNode 的 时 候 合并 钩子 函数 中 就 包含 init 钩子 酚 数 ， 定 义 在 


src/core/vdom/create-component .js 中 : 


init (vnode: VNodewWithData，hydrating: boolean): ?boolean 攻 
下 ( 
Vvnode.componentInstance && 
!vnode .componentInstance._ isDestroyed && 
Vvnode .data.keepAlLive 
) 荆 
// kept-alive components，treat as a patch 
const mountedNode: any = vnode // work around flow 
componentVNodeHooks ,prepatch(mountedNode，mountedNode ) 
Telseet 
const child = vnode,.componentInstance = createComponentInstanceForVvnode( 
Vvnode， 
activeInstance 
) 
child.$mount(hydrating ? vnode.elm : undefined，hydrating ) 
】} 
}， 


init 钩子 函数 执行 也 很 简单 ， 我 们 先 不 考虑 keepAlive 的 情况 ， 它 是 通过 
createComponentInstanceForvnode 创建 一 个 Vue 的 实例 ， 然 后 调用 $mount 方法 挂 载 子 组 件 ， 
先 来 看 一 下 _createcomponentInstanceForvnode 的 实现 : 


export function createCcomponentInstanceForvnode (人 
vnode: any，V// we know it's MountedCcomponentVNode but flow doesn't 


parenmtianyvXactavernskancenelafecyche state 
六 碍 CompoOnenmitE 人 
const options: InternalComponentoOptions = 攻 
_1ISComponent : true， 
_parentVnode: vnode， 
parent 
】} 
// check inline-template render functions 
const inlineTemplate = Vvnode.data,inlineTempJlate 
if (IsDef(inlineTempJate)) 攻 
options ,render = inlineTemplate.render 
options ,staticRenderFns = inlineTemplate.staticRenderFns 


j 


return new vnode.componentoptions ,Ctor(options ) 


createCcomponentInstanceForvnode 函数 构造 的 一 个 内 部 组 件 的 参数 ， 然后 执行 new 

vnode .componentoptions.Cctor(options) 。 这 里 的 vnode.componentoptions.Cctor 对 应 的 束 是 子 
组 件 的 构造 画 数 ， 我 们 上 一 节 分 析 了 它 实 际 上 是 继承 于 Vue 的 一 个 构造 器 Sub ， 相 当 于 new 
Sub(options) 这 里 有 几 个 关键 参数 要 注意 几 个 点 ， _iscomponent 为 true 表示 它 是 一 个 组 

件 ， parent 表示 当前 微 活 的 组 件 实例 〈 注 意 ， 这 里 比较 有 意思 的 是 如 何 拿 到 组 件 实例 ， 后 面 会 介 
绍 。 


所 以 子 组 件 的 实例 化 实际 上 就 是 在 这 个 时 机 执行 的 ， 并 且 它 会 执行 实例 的 _init 方法 ， 这 个 过 程 有 
一 些 和 之 前 不 同 的 地 方 需要 挑 出 来 说 ， 代 码 在 src/core/instance/init.js 中 : 


Vue.prototype._init = function (options?: 0bject) { 
const Vvm: Component = this 
// merge options 
If (options && options,_isComponent ) { 
// optimize internal component Instant1Iat1Iion 
// Since dynamic options merging is pretty Slow，and none of the 
// internal component options needs Special treatment ， 
InitInternalComponent(vm，options ) 
Telsee 
vm,$options = mergeoptions( 
resolveConstructoroptions(vm.constructor )， 
Options || 人 {}， 
Vm 


// 


If (vm.$options.el) 并 
vm.$mount(vm.$options .el) 


这 里 首先 是 合并 options 的 过 程 有 变化 ， _iscomponent 为 true， 所 以 走 到 了 
InitInternalComponent 过 程 ， 这 个 画 数 的 实现 也 简单 看 一 下 : 


export function initInternalComponent (vm: Component，options: InternalComponentOpt 
Ions) 下 4 

const opts = vm.$options = 0bject.create(vm.constructor ,options ) 

// doing this because it's faster than dynamic enumeration， 

const parentVnode = options,_parentVnode 

opts.parent = options,.parent 

opts,_parentVvnode = parentVnode 


const vnodeCcomponentoOptions = parentVvnode.componentoptions 
opts,.propsData = vnodecomponentoptions.propsData 
opts,_parentListeners = vnodeCcomponentoptions .1Listeners 
opts,_renderCchildren = vnodecomponentoptions .children 
opts,_componentTag = vnodecomponentoptions .tag 


If (options,render) 革 
opts.render = options.render 
opts,.statIicRenderFns = options.staticRenderFns 


这 个 过 程 我 们 重点 记 住 以 下 几 个 点 即 可 : opts,parent = options.parent 、 opts, parentVnode = 
parentvnode ， 它 们 是 把 之 前 我 们 通过 createcomponentInstanceForvnode 画 数 传人 的 几 个 参数 合 
并 到 内 部 的 选项 $options 里 了 。 


再 来 看 一 下 __init 画 数 最 后 执行 的 代码 : 


If (vm,$options ,el) 
Vvm.$mount(vm.$options.el) 


由 于 组 件 初 始 化 的 时 候 是 不 传 el 的 ， 因 此 组 件 是 自己 接管 了 $mount 的 过 程 ， 这 个 过 程 的 主要 流程 在 
上 一 章 介绍 过 了 ， 回 到 组 件 init 的 过 程 ， componentVNodeHooks 的 init 钩子 函数 ， 在 完成 实 
例 化 的 _init 后 ， 接着 会 执行 child.$mount(hydrating ? vnode,elm : undefined， 

hydrating) 。 这 里 hydrating 为 true 一 般 是 服务 端 泻 染 的 情况 ， 我 们 只 考虑 客户 端 泻 染 ， 所 以 这 
里 $mount 相当 于 执行 child.$mount(undefined，false) ， 它 最 终 会 调用 mountcomponent 方 
法 ， 进 而 执行 vm,_render() 方法 : 


Vue.prototype._render = function (): VNode { 
const vm: Component = this 
const { render，_parentvnode }》 = vm.$options 


// Set parent vnode. this allows render functions to have access 
// to the data on the placeholder node ， 
vm.$vnode = _parentVnode 


nendeneseli 
Jet vnode 
EYE 
Vvnode = render.call(vm._renderProxy，Vvm.$createElement ) 
catchn (e) 六 
AR 
】} 
// Set parent 
Vvnode.parent = _parentVnode 
return vnode 


我 们 只 保留 关键 部 分 的 代码 ， 这 里 的 _parentvnode 就 是 当前 组 件 的 父 VNode， 而 render 画 数 生 
成 的 _vnode 当前 组 件 的 滨 染 vnode ， vnode 的 parent 指向 了 _parentvnode ， 也 就 是 
vm,.$vnode ， 它 们 是 一 种 父子 的 关系 。 


我 们 知道 在 执行 完 vm.,_render 生成 VNode 后 ， 接 下 来 束 要 执行 vm._update 去 泻 染 VNode 了 。 
来 看 一 下 组 件 演 染 的 过 程 中 有 哪些 需要 注意 的 ， vm._update 的 定义 在 


src/core/instance/Lifecycle.js 中 : 


export Jet activeInstance: any = _ nu]1 
Vue.prototype,_update = function (vnode: VNode，hydrating?: boolean) 攻 
const vm: Component = this 
const prevE]1 = Vvm.$el 
const prevvnode = vm.,_vnode 
const prevActiveInstance = activeInstance 
activeInstance = Vm 
vm,_vnode = vnode 
// Vue,prototype._ patch Is injected in entry points 
// based on the rendering backend used ， 
If (!prevVnode) 攻 
Lantainernde 
vm,$el = vm, patch__ (vm.$el，vnode，hydrating，Talse /人 removeonly ”7/) 
else 
// updates 
vm,$el = vm, patch__ (prevvnode，vnode) 
} 
activeInstance = prevActiveInstance 
// update VUe reference 
If (prevE]1) 攻 


prevE1._Vvue_ = nul1 
】} 
If (vm.$el) 攻 
vm.,$e1. vue _ _ = Vvm 
】} 


// if parent ls an HOC，update its $el as wel1 
If (vm.$vnode && vm.$parent && vm.$vnode === Vvm.$parent._vnode) 革 
vm,$parent.$el = Vvm.$el] 


// updated hook is called by the Scheduler to ensure that children are 
// updated in a parent 's updated hook . 


_update 过 程 中 有 几 个 关键 的 代码 ， 首 先 vm,_vnode = vnode 的 逻辑 ， 这 个 vnode 是 通过 
vm,，render() 返回 的 组 件 演 染 VNode， vm,_vnode 和 vm.$vnode 的 关系 就 是 一 种 父子 关系 ， 用 
代码 表达 就 是 vm, vnode,parent === vm.$vnode 。 还 有 一 段 比 较 有 意思 的 代码 : 


export let activeInstance: any = nu]1 
Vue.prototype,_update = function (vnode: VNode，hydrating?: boolean) 攻 
内 
const prevActiveInstance = activeInstance 
activeInstance = Vm 
If (!prevVnode) 攻 
// initial render 
vm.$el = vm, patch__ (vm.$el，vnode，hydrating，Tfalse /removeonly *7/) 
Jelse ( 
// updates 
vm.$el = vm, patch_ (prevvnode，vnode) 


activeInstance = prevActiveInstance 


这 个 activeInstance 作用 束 是 保持 当前 上 下 文 的 Vue 实例 ， 它 是 在 lifecycle 模块 的 全 局 变 
量 ， 定 义 是 export let activeInstance: any = nul1l ， 并 且 在 之 前 我 们 调用 
createComponentInstanceForvnode 方法 的 时 候 从 1ifecycle 模块 获取 ， 并 且 作 为 参数 传人 的 。 
因为 实际 上 JavaScript 是 一 个 单线 程 ，Vue 整个 初始 化 是 一 个 深度 有 表 历 的 过 程 ， 在 实例 化 子 组 件 的 过 程 
中 ， 它 需要 知道 当前 上 下 文 的 Vue 实例 是 什么 ， 并 把 它 作为 子 组 件 的 父 Vue 实例 。 之 前 我 们 提 到 过 对 
子 组 件 的 实例 化 过 程 先 会 调用 initInternaLlCcomponent(vm，options) 合并 options ， 把 

parent 存储 在 vm.$options 中 ,在 $nmount 之 前 会 调用 initLifecycle(vm) 方法 : 


export function anItaftecycle (vm Component) 攻 
const options = vm.$options 


// locate first non-abstract parent 
let parent = options.parent 
If (parent && !options ,abstract) { 
while (parent.$options.abstract && parent .$parent ) { 
parent = parent.$parent 


】} 
parent .$children.push(vm) 


vm.$parent = parent 
2 


可 以 看 到 vm.$parent 就 是 用 来 保留 当前 vm 的 父 实例 ， 并 且 通 过 parent.$children.push(vm) 
来 把 当前 的 vm 存储 到 父 实 例 的 $children 中 。 


在 vm._update 的 过 程 中 ， 把 当前 的 vm 赋值 给 activeInstance ， 同 时 通过 const 
prevActiveInstance = activeInstance 用 prevActiveInstance 保留 上 一 次 的 

activeInstance 。 实 际 上 ， prevActiveInstance 和 当前 的 vm 是 一 个 父子 关系 ， 当 一 个 _vm 
实例 完成 它 的 所 有 子 树 的 patch 或 者 update 过 程 后 ， _ activeInstance 会 回 到 它 的 父 实 例 ， 这 样 束 完 
美 地 保证 了 createcomponentInstanceForvnode 整个 深度 朋 历 过 程 中 ， 我 们 在 实例 化 子 组 件 的 时 候 
能 传人 当前 子 组 件 的 父 Vue 实例 ， 并 在 _init 的 过 程 中 ， 通 过 vm.$parent 把 这 个 父子 关系 保 


贰 7 
外 o 


那么 回 到 _update ， 最 后 就 是 调用 _ patch _ ” 泻 染 VNode 了 。 
Vvm.$el = vm, patch__ (vm.$el，vnode，hydrating，Talse /” removeonly ”7/) 


function patch (ol1dvnode，vnode，hydrating，removeonly) 苹 
CA 
let 1ISsInitialPatch = false 
const insertedvnodeQueue = [] 


If (isUndef(o1ldvnode)) 攻 
// empty mount (Likely as component )，create new root element 
ISInitialPatch = true 
createEJm(vnode，insertedvnodeQueue ) 
Jelse ({ 
Ch 


这 里 又 回 到 了 本 节 开 始 的 过 程 ， 之 前 分 析 过 负责 滨 染 成 DOM 的 本 数 是 createElm ， 注 意 这 里 我 们 只 
传 了 2 个 参数 ， 所 以 对 应 的 parentElm 是 undefined 。 我 们 再 来 看 看 它 的 定义 : 


function createElm (人 
Vvnode， 
insertedVvnodeQueue， 
parentE1Lm， 
refEJm， 
nested， 

OwnerArray， 
IndexX 

Js 
// 

If (createCcomponent(vnode，insertedVvnodeQueue，parentE1Im，refEJIm) ) 蔷 
eunn 


const data = Vvnode .data 
const children = vnode.chlildren 


const tag = vnode.tag 
If (IsDef(tag)) 于 
故人 


vnode.elm = vnode.ns 
? node0ps ,createElementNS(vnode.ns，tag ) 
: node0ops.createElement(tag，vnode) 
SetScope(vnode ) 


SEEamnouurgrore nm 
if (WEEX  ) 
光 
else ({ 
createchildren(vnode，children，insertedvnodeQueue ) 
If (isDef(data)) 攻 
invokeCreateHooks(vnode，insertedvnodeQueue ) 


】} 


Insert(parentElm，vnode.elm，refE1lLm) 


克 

} else if (isTrue(vnode.isComment )) 二 
vnode.elm = nodeops.createCcomment(vnode .text) 
Insert(parentEJm，Vvnode.elm，refEJlm) 

helse { 
Vvnode.elm = nodeops.createTextNode(vnode .text) 
Insert(parentEJm，Vvnode.elm，refEJlm) 


注意 ， 这 里 我 们 传人 的 vnode 是 组 件 浑 染 的 _vnode ， 也 就 是 我 们 之 前 说 的 vm._vnode ， 如 果 组 
件 的 根 节 点 是 个 普通 元 素 ， 那 么 vm._vnode 也 是 普通 的 vnode ， 这 里 createCcomponent(vnode， 
InsertedvnodeQueue，parentElm，refEJm) 的 返回 值 是 false。 接 下 来 的 过 程 束 和 我 们 上 一 章 一 样 
了 ， 先 创建 一 个 父 节 点 占 位 符 ， 然 后 再 通 历 所 有 子 VNode 递 娄 调用 _ createElm ， 在 通 历 的 过 程 中 ， 
如 果 遇 到 子 VNode 是 一 个 组 件 的 VNode， 则 重复 本 节 开 始 的 过 程 ， 这 样 通过 一 个 递归 的 方式 就 可 以 完 
整地 构建 了 整个 组 件 树 。 


由 于 我 们 这 个 时 候 传人 的 parentElm 是 空 ， 所 以 对 组 件 的 插入 ， 在 createcomponent 有 这 么 一 段 
逻辑 : 


function createcomponent (vnode，jinsertedvnodeQueue，parentElm，refEJlm) 苹 
let 工 = vnode,data 
if (isDef(i)) 攻 
2 
if (isDef(1I = 寺 .hook) && isDef(I = 1.,init)) { 
I(vnode，false /* hydrating */) 
】} 
2 
If (IsDef(vnode.componentInstance)) 1 


initComponent(vnode，insertedVvnodeQueue ) 

Insert(parentElm，vnode.elm，refE1lLm) 

If (isTrue(ISReactivated)) 攻 
reactivateCcomponent(vnode，insertedvnodeQueue，parentEJlm，refEJm) 


】} 


return true 


在 完成 组 件 的 整个 _patch 过 程 后 ， 最 后 执行 insert(parentElm，vnode.elm，refElm) 完成 组 件 
的 DOM 插入 ， 如 果 组 件 patch 过 程 中 又 创建 了 子 组 件 ， 那 么 DOM 的 插入 顺序 是 先 子 后 父 。 


总 绪 


那么 到 此 ， 一 个 组 件 的 VNode 是 如 何 创建 、 初 始 化 、 浑 染 的 过 程 也 就 介绍 完毕 了 。 在 对 组 件 化 的 实现 
有 一 个 大 概 了 解 后 ， 接 下 来 我 们 来 介绍 一 下 这 其 中 的 一 些 细节 。 我 们 知道 编 罕 一 个 组 件 实际 上 是 编 罕 
一 个 Javascript 对 象 ， 对 象 的 描述 就 是 各 种 配置 ， 之 前 我 们 提 到 在 __init 的 最 初 阶段 执行 的 就 是 
merge options 的 逻辑 ， 那 么 下 一 节 我 们 从 源码 角度 来 分 析 合并 配置 的 过 程 。 


合并 配置 


通过 之 前 章节 的 源码 分 析 我 们 知道 ， new vue 的 过 程 通常 有 2 种 场景 ， 一 种 是 外 部 我 们 的 代码 主动 
调用 new vue(options) 的 方式 实例 化 一 个 Vue 对 象 ; 另 一 种 是 我 们 上 一 节 分 析 的 组 件 过 程 中 内 部 
通过 new Vvue(options) 实例 化 子 组 件 。 


无 论 哪 种 场景 ， 都 会 执行 实例 的 _init(options) 方法 ， 它 首先 会 执行 一 个 merge options 的 逮 
辑 ， 相 关 的 代码 在 src/core/instance/init.js 中 : 


Vue.prototype._init = function (options?: 0bject) { 
// merge options 
If (options && options,_isComponent ) { 
// optimize internal component instantiation 
// Since dynamic options merging Is pretty Slow，and none of the 
// internal component options needs Special treatment . 
InitInternalComponent(vm，options ) 
helse 1{ 
vm,$options = mergeoptions( 
resolveConstructoroptions(vm.constructor )， 
Options || 人 {， 
Vm 


可 以 看 到 不 同 场景 对 于 options 的 合并 逻辑 是 不 一 样 的 ， 并 且 传 和 的 options 值 也 有 非常 大 的 不 
同 ， 接 下 来 我 会 分 开 介 绍 2 种 场景 的 options 合并 过 程 。 


为 了 更 直观 ， 我 们 可 以 举 个 简单 的 示例 : 
Import Vue from 'Vue' 


Jet childcomp = 1 

template: "<div>{f{tmsg}y}y</vdiv> '， 
Created() 荆 

Consolesogchnmidcreatedy) 
外 
mounted() 攻 

console,1og('child mounted ' ) 
外 
data() 革 

return 攻 

msg: "Hel1o Vue' 


Vue ,mixin( 攻 
created() 荆 
console,1og('parent created ' ) 


】} 
]) 
Jet app = new Vue({ 

el:  "'#app '， 

render: h => h(Cchildcomp) 
了 ) 


外 部 调用 场景 


当 执行 new Vvue 的 时 候 ， 在 执行 this,_init(options ) 的 时 候 ， 就 会 执行 如 下 逻辑 去 合并 


options 


Vvm.$options = mergeoptions( 
resolveConstructoroptions(vm,.constructor )， 
options || {j， 

Vm 


这 里 通过 调用 mergeoptions 方法 来 合并 ， 它 实际 上 就 是 把 
resolvecConstructoroptions(vm.constructor ) 的 返回 值 和 options 做 合 

并 ， reSsolveConstructoroptions 的 实现 先 不 考虑 ， 在 我 们 这 个 场景 下 ， 它 还 是 简单 返回 
Vvm,constructor,.options ， 相当 于 Vue,options ， 那么 这 个 值 又 是 什么 呢 ， 其 实在 
initGLobalAPI(Vue) 的 时 候 定义 了 这 个 值 ， 代 码 在 src/core/global-api/index.js 中 : 


export function initGlobalAPI (Vue: GlobalAPI) 攻 
7 
Vue.options = 0bject.create(null) 
ASSET_TYPES .forEach(type => 《{ 
Vue.options[type + 'sS']= 0bject.create(nul1) 


]) 


// this is used to identify the "base"” constructor to extend al1 plain-object 
// components with in Weex's multi-instance Scenarilos . 
Vue.options,_base = Vue 


extend(Vue.options ,components，builtInCcomponents ) 


首先 通过 Vvue.options = 0bject.create(nul1) 创建 一 个 宪 对 象 ， 然 后 通 历 
ASSET_TYPES ， ASSET_TYPES 的 定义 在 src/shared/constants.js 中 : 


export const ASSET_TYPES = [ 
“component ' ， 
"directive ' ， 
LETNNEGIEE 


所 以 上 面 通 历 AssET_TYPES 后 的 代码 相当 于 : 


Vue,options,.components 


全 
全 


Vue.options .directives 
Vue,options .filters = 1{} 


接着 执行 了 vue.options._pase = Vue ， 它 的 作用 在 我 们 上 节 实 例 化 子 组 件 的 时 候 介绍 了 。 


最 后 通过 extend(Vue.options .components，builtIncomponents ) 把 一 些 内 喷 组 件 扩展 到 
Vue.options.componentSs 上 上 Vue 的 内 蔷 组 件 目前 有 <keep-alive> 、 <transition> 和 
<transition-group> 组 件 ， 这 也 就 是 为 什么 我 们 在 其 它 组 件 中 使 用 <keep-alive> 组 件 不 需要 注 

册 的 原因 ， 这 块 儿 后 续 我 们 介绍 <keep-alive> 组 件 的 时 候 会 详细 讲 。 


那么 回 到 mergeoptions 这 个 函数 ， 它 的 定义 在 Src/Vcore/util/Voptions .js 中 : 


* Merge two option objects into a_new one， 
* Core utility used in both Instantiation and Inheritance ， 
人 
export function mergeoptions ( 
paremesOobJect ， 
Chnald ob 可 ec 
Vvm?: Component 


JEObWecCte 
If (process.env.NODE_ENV !== "production' ) { 
checkComponents(child) 
】} 
if (typeof child === 'function' ) 攻 
child = child,.options 
】} 


normalizeProps(child，vm) 
normalizeInject(child，vm) 
normalizeDirectives(child) 
const extendsFrom = child.extends 
If (extendsFrom) 六 
parent = mergeoptions(parent，extendsFrom，vVvm) 
】} 
If (child.mixins) 攻 
for (let L= 0， 1 = child,mixins, length; 工 < 1 I++) 区 
parent = mergeoptions(parent，child.mixins[I]，vm) 


const options = 1 

Jet key 

for (key in parent) 区 
mergeField(key) 

】} 

for (key in child) 并 
If (!hasown(parent，key)) 荆 

mergeFlield(key) 


j 


functaonimercogeFEIeldGkKey) 居 攻 

const strat = Strats[key] || defaultStrat 

options[key] = strat(parent[key]，child[key]，vm，key) 
】} 


return options 


mergeoptions 主要 功能 就 是 把 parent 和 child 这 两 个 对 象 根据 一 些 合 并 策略 ， 合并 成 一 个 新 
对 象 并 返回 。 比较 核心 的 几 步 ， 先 递归 把 extends 和 mixixns 合并 到 parent 上 ， 然后 遥 历 
parent ， 调 用 mergeFieLd ， 然 后 再 青 历 child ， 如 果 key 不 在 perent 的 自身 属性 上 ， 则 
调用 mergeField 。 


这 里 有 意思 的 是 mergeField 画 数 ， 它 对 不 同 的 key 有 着 不 同 的 合并 策略 。 举 例 来 说 ， 对 于 生命 周 
期 画 数 ， 和 它 的 合并 策略 是 这 样 的 : 


function mergeHook (人 
parentVal: ?Array<Function>， 
childval: ?Function | ?Array<Function> 
): ?Array<Function> 革 
return childVal 
?3 parentVal 
? parentVal,concat(childVal ) 
: Array,.isArray(childVval) 
?3 childVal 
[childval] 
: parentVal 


LIFECYCLE_HOOKS ,forEach(hook => 攻 
Strats[hook] = mergeHook 


]) 


这 其 中 的 LIFECYCLE_HOoKS 的 定义 在 src/shared/constants.js 中 : 


export const LIFECYCLE_HOOKS = [ 
"beforeCreate ' ， 
"created ' ， 
"beforeMount '， 


mounted '， 
beforeuypdate 
"Updated ' ， 
beforeDestroy 
EdestEoyedie 
actlIVatedi 
"deactivated 
emnorCaptured 


这 里 定义 了 Vue.js 所 有 的 钩子 函数 名 称 ， 所 以 对 于 钩子 函数 ， 他 们 的 合并 策略 都 是 mergeHook 画 
数 。 这 个 函数 的 实现 也 非常 有 意思 ， 用 了 一 个 多 层 3 元 运算 符 ， 逻 辑 就 是 如 果 不 存在 childval ， 了 避 
返回 parentval ; 否则 再 判断 是 否 存在 parentval ， 如 果 存 在 就 把 childval 添加 到 

parentVval 后 返回 新 数组 ; 否则 返回 childval 的 数组 。 所 以 回 到 mergeoptions 画 数 ， 一 
parent 和 child 都 定义 了 相同 的 钧 子 函 数 ， 那 么 它们 会 把 2 个 钩子 函数 合并 成 一 个 数组 。 


关于 其 它 属 性 的 合并 策略 的 定义 都 可 以 在 src/core/util/options.js 文件 中 看 到 ， 这 里 不 一 一 介 
绍 了 ， 感 兴趣 的 同学 可 以 自己 看 。 


通过 执行 mergeField 酌 数 ， 把 合并 后 的 结果 保存 到 options 对 象 中 ， 最 终 返 回 它 。 
因此 ， 在 我 们 当前 这 个 case 下 ， 执 行 完 如 下 合并 后 : 


vm.$options = mergeoptions( 
resolveCconstructoroptions(vm,.constructor )， 
options || {]j， 
Vm 


vm.$options 的 值 差 不 多 是 如 下 这 样 : 


Vvm.$options = { 
Components: { 
created: [ 
function created() 并 
console,1og('parent created ' ) 


】} 
]， 
directives: { 
failters: { 少 
_base: function Vue(options) 苹 


AR 

外 

el: "#app"， 

render: function (h) 攻 
人 

】} 


组 件 场景 


由 于 组 件 的 构造 西数 是 通过 Vvue.extend 继承 自 vue 的 ， 先 回顾 一 下 这 个 过 程 ， 代 码 定义 在 
src/core/global-api/extend.js 中 。 


兴 芝 二 

Glasseannertance 

2 
Vue.extend = function (extendoptions: Object): Function 攻 

h 


Sub .options = mergeoptions( 
Super .options， 
extendoptions 


MA 

// keep a reference to the super options at extenslion time ， 

// later at instantiation we can check If Super's options have 
// been Updated . 

Sub .superoptions = Super.options 

Sub .extendoptions = extendoptions 

Sub .sealedoptions = extend({}+，Sub.options ) 


0 
return Sub 


我 们 只 保留 关键 逻辑 ， 这 里 的 extendoptions 对 应 的 就 是 前 面 定 义 的 组 件 对 象 ， 它 会 


Vvue.options 合并 到 sub.opitons 中 。 


接 下 来 我 们 再 回忆 一 下 子 组 件 的 初始 化 过 程 ， 代 码 定 义 在 src/core/vdom/create-component .js 
中 : 


export function createCcomponentInstanceForvnode (人 
vnode: any，V// we know it's MountedCcomponentVNode but flow doesn't 
Parent any XiEactavernsEanmcenmlafecycCheEstate 

): Component 区 
const options: InternalComponentoOptions = 并 

_iSsComponent: truey 
_parentVnode: vnode， 
parent 
} 
网 
return new vnode.componentoptions ,Ctor(options ) 


这 里 的 vnode ,componentoptions.Cctor 承 是 指向 vue.extend 的 返回 值 sub ， 所 以 执行 new 
vnode .componentoptions.Cctor(options) 接着 执行 this._init(options) ， 因 为 
options._ isComponent 为 true， 那么 合并 options 的 过 程 走 到 了 initInternalComponent(Vvm， 
options) 逻辑 。 先 来 看 一 下 它 的 代码 实现 ， 在 src/core/instance/init,js 中 : 


export function initInternalComponent (vm: Component，options: InternalComponentOpt 
Ions) 攻 

const opts = vm,$options = 0bject,create(vm.constructor.options ) 

// doing this because it's faster than dynamic enumeration， 

const parentVnode = options,_parentVnode 

opts.parent = options,.parent 

opts,_parentVvnode = parentVnode 


const vnodeCcomponentoOptions = parentVvnode.componentoptions 
opts,.propsData = vnodecomponentoptions,.propsData 
opts,_parentListeners = vnodeCcomponentoptions.1Listeners 
opts,_renderCchildren = vnodecomponentoptions .children 
opts,_componentTag = vnodecomponentoptions .tag 


If (options,render) 
opts.render = options.render 
opts,.staticRenderFns = options.staticRenderFns 


InitInternalComponent 方法 首先 执行 const opts = vm.$options = 
Object, create(vm.constructor .options) ， 这 里 的 vm.construction 就 是 子 组 件 的 构造 本 数 
Sub ， 相当 于 vm.$options = Sub,.options 。 


接着 又 把 实例 化 子 组 件 传人 的 子 组 件 父 VNode 实例 parentvnode 、 子 组 件 的 父 Vue 实例 parent 
保存 到 vm.$options 中 ， 另 外 还 保留 了 parentvnode 配置 中 的 如 propsData 等 其 它 的 属性 。 


这 么 看 来 ， initInternalcomponent 只 是 做 了 简单 一 层 对 象 赋值 ， 并 不 涉及 到 递 籽 、 合 并 策略 等 复 
杂 逻 辑 。 


因此 ， 在 我 们 当前 这 个 case 下 ， 执 行 完 如 下 合并 后 : 


InitInternalComponent(vm，options ) 


vm.$options 的 值 差 不 多 是 如 下 这 样 : 


Vvm.$options = { 
parent: Vue /* 父 Vue 实 例 */， 
propsData: undefined， 
_componentTag: undefined， 
_parentVnode: VNode /信人 父 VNode 实 例 */， 
_renderCchildren:undefined， 
有 DiIzOEOE 人 


Components: { 》 
directives: { 儿 
filters: { 》 
_base: function Vue(options) 攻 
本 汪 
】 
_Ctor: {}》， 
created: [ 
functenronicnmeaeeod 作 天 
console,1og('parent created ' ) 
JEUnctionmcnreated (二 天 
console.log('"child created ' ) 
]， 
mounted: [ 
function mounted() 攻 
console.1og('child mounted ' ) 


上 
]， 
data() 于 
EECEm 人 
msg: "Hel1o Vue' 
】 
}， 
template: "<div>{{tmsg}y}y</vdiv> 
】} 
】} 
总 结 


那么 至 此 ，Vue 初始 化 阶段 对 于 options 的 合并 过 程 就 介绍 完了 ， 我 们 需要 知道 对 于 options 的 
合并 有 2 种 方式 ， 子 组 件 初 始 化 过 程 通 过 initInternaLlcomponent 方式 要 比 外 部 初始 化 Vue 通过 
mergeoptions 的 过 程 要 快 ， 合 并 完 的 结果 保留 在 vm.$options 中 。 


纵 观 一 些 库 、 框 架 的 设计 几乎 都 是 类 似 的 ， 自 身 定义 了 一 些 默 认 配 置 ， 同 时 又 可 以 在 初始 化 阶段 传人 
一 些 定 义 配置 ， 然 后 去 merge 默认 配置 ， 来 达到 定制 化 不 同 需求 的 目的 。 只 不 过 在 Vue 的 场景 下 ， 会 
对 merge 的 过 程 做 一 些 精细 化 控制 ， 虽 然 我 们 在 开发 自己 的 JSSDK 的 时 候 并 没有 Vue 这 么 复杂 ， 但 这 
个 设计 思想 是 值得 我 们 借鉴 的 。 


每 个 Vue 实例 在 被 创建 之 前 都 要 经 过 一 系列 的 初始 化 过 程 。 例 如 需要 设置 数据 监听 、 编 译 模板 、 挂 载 
实例 到 DOM、 在 数据 变化 时 更 新 DOM 等 。 同 时 在 这 个 过 程 中 也 会 运行 一 些 叫 做 生命 周期 钩子 的 画 
数 ， 给 予 用 户 机 会 在 一 些 特定 的 场景 下 添加 他 们 自己 的 代码 。 


Init 
Events & Lifecycle 


Init 
injections & reactivity 


Has 
el" option? 


vm.Smount(el) 
is called 


Has 
template ”option7 in 


Compile template Compile els 
into outerHTML 
renderfunction as template 


Create vm.sel 
and replace 
“el” with i 


人 本 
when data * 


changes …… 


Virtual DOM 
re-render 


and patch 


when TS 


vm.S$Sdestroy0 
is called updated 


Teardown 
watchers, child 
components and 
event listeners 


Destroyed 


*template compilation is performed ahead-of-time if using 
a build step, e.g. single-file components 
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在 我 们 实际 项 目 开发 过 程 中 ， 会 非常 频繁 地 和 Vue 组 件 的 生命 周期 打交道 ， 接 下 来 我 们 就 从 源码 的 角 


度 来 看 一 下 这 些 生 命 周 期 的 钧 子 函 数 是 如 何 被 执行 的 。 
源码 中 最 终 执行 生命 周期 的 本 数 都 是 调用 callHook 方法 ， 它 的 定义 在 


src/core/instance/lLifecycle 中 : 


export function calJIHook (vm: Component，hook: string) 六 
// #7573 disable dep collection when invoking 1ifecycle hooks 
pushTarget() 
const handjlers = vm.$options[hook] 

If (handlers) 攻 
for (let IL =0， jz=handlers,Jlength; 工 < ]j; i++) 六 
IE 琶 人 
handlers[I].call(vm) 
} catch (e) 萎 
handleError(e，Vvm ， $thook}y hook  ) 
】} 
】} 
If (vm,_hasHookEvent ) 1{ 
Vvm,$emit( hook: ”+ hooko) 
】} 
popTarget() 


callHook 本 数 的 逻辑 很 简单 ， 根 据 传人 的 字符 串 hook ， 去 拿 到 vm.$options[hook] 对 应 的 
调 函 数 数 组 ， 然 后 逗 历 执行 ， 执 行 的 时 候 把 _vm 作为 函数 执行 的 上 下 文 。 


酉 


在 上 一 节 中 ， 我 们 详细 地 介绍 了 vuejjs 合并 options 的 过 程 ， 各 个 阶段 的 生命 周期 的 函数 也 被 合并 
到 vm.$options 里 ， 并 且 是 一 个 数组 。 因 此 _ callhook 画 数 的 功能 就 是 调用 某 个 生命 周期 钧 子 注册 


的 所 有 回调 酚 数 。 
了 解 了 生命 周期 的 执行 方式 后 ， 接 下 来 我 们 会 具体 介绍 每 一 个 生命 周期 丁 数 它 的 调用 时 机 。 


beforeCreate &x created 


beforecreate 和 created 酚 数 都 是 在 实例 化 _vue 的 阶段 ， 在 _init 方法 中 执行 的 ， 它 的 定义 


在 src/core/instance/init.js 中 : 


Vue,.prototype._init = function (options?: Object) { 
0 
InitLifecycle(vm) 
InitEVvents(vm) 
InitRender(vm) 
CalJIHook(vm， 'beforecreate ' ) 
InitInjections(vm) // resolve injections before data/props 
InitState(vm) 
InitProvide(vm) // resolve provide after data/props 


calJIHook(vm， "created ' ) 
OA 


可 以 看 到 beforecreate 和 created 的 钩 子 调 用 是 在 initstate 的 前 后 ， initstate 的 作用 
是 初始 化 props 、 data 、 methods 、 watch 、 computed 等 属性 ， 之 后 我 们 会 详细 分 析 。 那 么 
显然 beforecreate 的 钧 子 范 数 中 就 不 能 获取 到 props 、 data 中 定义 的 值 ， 也 不 能 调用 
methods 中 定义 的 范 数 。 


在 这 俩 个 钧 子 函 数 执行 的 时 候 ， 并 没有 泻 染 DOM， 所 以 我 们 也 不 能 够 访问 DOM， 一 般 来 说 ， 如 果 组 
件 在 加 载 的 时 候 需 要 和 后 端 有 交互 ， 放 在 这 俩 个 钧 子 函 数 执行 都 可 以 ， 如 果 是 需要 访问 

props 、 data 等 数据 的 话 ， 就 需要 使 用 created 钧 子 范 数 。 之 后 我 们 会 介绍 vue-router 和 vuex 
的 时 候 会 发 现 它 们 都 混合 了 beforecreatd 钩子 本 数 。 


beforeMount & mounted 


顾名思义 ， beforeMount 钩子 本 数 发 生 在 _ mount ， 也 就 是 DOM 挂 载 之 前 ， 它 的 调用 时 机 是 在 
mountComponent 本 数 中 ， 定义 在 Src/Vcore/instance/J1ifecycle,js 中 : 


export function mountComponent (人 
vm: Component， 
el1: ?ElLement， 
hydrating?: boolean 


SS 


: Component 攻 

Vvm.$el = el 

OA 

cal1LHook(vm， 'beforeMount ' ) 


let updateCcomponent 
/* lstanbul 1Ignore ff */ 
If (process,env.NODE_ENV !== "production'&& config,performance && mark) 区 
updateCcomponent = () => f 
const name = vm,_name 
const id = vm._uid 
const startTag =  Vvue-perf-start:${tid}- 
const endTag =  `vue-perf-end:${tid}- 


mark(startTag) 

const vnode = vm._render() 

mark(endTag ) 

measure( Vvue ${tname} render ，SstartTag，endTag ) 


mark(startTag) 

vm,_update(vnode，hydrating ) 

mark(endTadg ) 

measure( Vvue ${fname} patch ，startTag，endTag ) 


】} 
else ( 


UpdateCcomponent = () => { 
vm,_update(vm,_render()，hydrating) 


/VEWesetenusatovVvmewatcneniansnueathewatchen sconstnuctor 
AASsSzincenthneuwatcher snatal patcnimnay call ytionrceuUpdaten(esga ansadeucnld 
// component 's mounted hook)，which relies on vm,_ watcher being already defined 
new Watcher(vm，updatecomponent，noop， 
before () 
If (vm._ isMounted) 革 
calJHook(vm， 'beforeUpdate ' ) 


】} 


True SRenderwatcher yy) 
hydrating = false 


// manually mounted instance，call mounted on self 
// mounted is called for render-created child components in its Inserted hook 
If (vm.$vnode == null) 攻 

vm,_ isMounted = true 

callLHook(vm， mounted ' ) 


return Vm 


在 执行 vm._render() 画 数 泻 染 VNode 之 前 ， 执 行 了 _ beforeMount 钩子 函数 ， 在 执行 完 
vm._update() 把 VNode patch 到 真实 DOM 后 ， 执 行 mouted 钧 子 。 注 意 ， 这 里 对 mouted 钩子 
函数 执行 有 一 个 判断 逻辑 ， vm.$vnode 如 果 为 nul1 ， 则 表明 这 不 是 一 次 组 件 的 初始 化 过 程 ， 而 是 
我 们 通过 外 部 new vue 初始 化 过 程 。 那 么 对 于 组 件 ， 它 的 mounted 时 机 在 哪儿 呢 ? 


之 前 我 们 提 到 过 ， 组 件 的 VNode patch 到 DOM 后 ， 会 执行 invokeInsertHook 本 数 ， 把 
insertedvnodeQueue 里 保存 的 钩子 函数 依次 执行 一 逼 ， 它 的 定义 在 src/core/vdom/ypatch .js 
中 : 


function InvokeInsertHook (vnode，queue，initial) 六 
// delay insert hooks for component root nodes，invoke them after the 
// element ls really inserted 
If (isTrue(initial) && IsDef(vnode.parent)) { 
Vvnode.parent .data.pendingInsert = queue 
Telse 王 人 
for (let 工 = 0;) 工 < queue.Llength;y ++I) 苇 
queue[i].data.hook,.insert(queue[il]) 


该 画 数 会 执行 insert 这 个 钧 子 函 数 ， 对 于 组 件 而 言 ， insert 钩子 函数 的 定义 在 


src/core/vdom/Vcreate-component .js 中 的 componentVNodeHooks 中 : 


const componentVNodeHooks = { 
光合 
Insert (vnode: MountedCcomponentVNode) { 
const { context，componentInstance } = vnode 
If (!componentInstance,_ IsMounted) 攻 
componentInstance,_ isMounted = true 
calJIHook(componentInstance， 'mounted ' ) 


0 
}， 


我 们 可 以 看 到 ， 每 个 子 组 件 都 是 在 这 个 钧 子 函 数 中 执行 mouted 钩子 函数 ， 并 且 我 们 之 前 分 析 
过 ， insertedyvnodeQueue 的 添加 顺序 是 先 子 后 父 ， 所 以 对 于 同步 泻 染 的 子 组 件 而 言 ， mounted 多 
子 函 数 的 执行 顺序 也 是 先 子 后 父 。 


beforeUpdate & updated 


顾名思义 ， beforeuUpdate 和 updated 的 钩子 函数 执行 时 机 都 应 该 是 在 数据 更 新 的 时 候 ， 到 目前 为 
止 ， 我 们 还 没有 分 析 Vue 的 数据 双向 绑 定 、 更 新 相关 ， 下 一 章 我 会 详细 介绍 这 个 过 程 。 


beforeupdate 的 执行 时 机 是 在 浑 染 Watcher 的 before 本 数 中 ， 我 们 刚才 提 到 过 : 


export function mountComponent (人 
vm: Component， 
el1: ?ElLement， 
hydrating?: boolean 
): Component 区 
/让 


// we Set this to vm,_ watcher inside the watcher 's constructor 
// Since the watcher's initial patch may cal1 $forceUpdate (e.g.， inside child 
// component 's mounted hook)，which relies on vm, watcher being already defined 
new Watcher(vm，updatecomponent，noop， 攻 
before () f 
If (vm._ isMounted) 攻 
calJIHook(vm， 'beforeUpdate ' ) 


htmUes> SRenderwatchner >) 
OA 


注意 这 里 有 个 判断 ， 也 就 是 在 组 件 已 经 mounted 之 后 ， 才 会 去 调用 这 个 钩子 函数 。 
update 的 执行 时 机 是 在 flushschedulerQueue 本 数 调用 的 时 候 , 它 的 定义 在 


src/core/observer/scheduler,.js 中 : 


function flushSchedulerQueue () 并 
7 
// 获取 到 updatedQueue 
calJlUpdatedHooks(updatedQueue) 


function calluUpdatedHooks (queue) 攻 
let 工 = queue,1Llength 
whjile (I--) { 
const watcher = queue[I] 
const vm = watcher .vnm 
If (vm._ watcher === Watcher && vm,_ isMounted) { 
callLHook(vm， ' updated ' ) 


flushschedulerQueue 画 数 我 们 之 后 会 详细 介绍 ， 可 以 先 大 概 了 解 一 下 ， updatedQueue 是 更 新 了 
的 wathcer 数组 ， 那 么 在 _ callupdatedHooks 本 数 中 ， 它 对 这 些 数组 做 通 历 ， 只 有 满足 当前 
watcher 为 vm, watcher 以 及 组 件 已 经 mounted 这 两 个 条 件 ， 才 会 执行 updated 钩子 函数 。 


我 们 之 前 提 过 ， 在 组 件 mount 的 过 程 中 ， 会 实例 化 一 个 泻 染 的 watcher 去 监听 vm 上 的 数据 变化 重 
新 浑 染 ， 这 上 断 逻 辑 发 生 在 mountcomponent 画 数 执行 的 时 候 : 


export function mountCcomponent (人 
Vvm: Component， 
elL: ?3EJ]Lement， 
hydrating?: boolean 
): Component 区 
记 
// 这 里 是 简写 


let updateCcomponent = () => 攻 


vm,_update(vm,_render()，hydrating) 


new Watcher(vm，updatecomponent，noop， 攻 
before () 二 
If (vm._ isMounted) 革 
calJHook(vm， 'beforeUpdate ' ) 


】} 
EUCEAESSRenueTacchnen 7 
0 


那么 在 实例 化 _watcher 的 过 程 中 ， 在 它 的 构造 函数 里 会 判断 isRenderwatcher ， 接 着 把 当前 
watcher 的 实例 赋值 给 vm. watcher ， 定 义 在 src/core/observer/watcher.js 中: 


export default class Watcher { 


0 

Constructor (人 
vm: Component， 
exporFn: String | 
cb: Function， 


Function， 


options?: ?0bject， 


SRenderwatcher? : 


) 二 


this.vm = Vm 


boolean 


If (IsRenderwatcher ) 荆 
vm,_watcher = this 


】} 


vm,_watchers.push(this) 


2 


同时 ， 还 把 当前 wathcer 
数据 变化 然后 重新 演 染 的 ， 


实例 push 到 vm.,_watchers 中 ， vm.,_watcher 是 专门 用 来 监听 vm 上 
所 以 它 是 一 个 泻 染 相关 的 watcher ， 因 此 在 callupdatedHooks 西数 


中 ， 只 有 vm._watcher 的 回调 执行 完毕 后 ， 才 会 执行 updated 钩子 函数 。 


beforeDestroy & destroyed 


顾名思义 ， beforeDestroy 和 destroyed 钩子 函数 的 执行 时 机 在 组 件 销毁 的 阶段 ， 组 件 的 销毁 过 


程 之 后 会 详细 介绍 ， 最 终 会 


中 : 


调用 $destroy 方法 ， 它 的 定义 在 Src/core/instance/1ifecycle,js 


Vue.prototype.$destroy = function () { 


const vm: Component = this 


If (vm,_ isBelingDestroyed ) 荆 


retunn 


cal1lHook(vm， 'beforeDestroy ' ) 


vm,_iSsBelingpDestroyed = true 


const parent = Vm 


// remove Self from parent 


.$parent 


If (parent && !parent._ IsBeingDestroyed && !Vvm.$options.abstract) 六 


remove(parent .$children，vm) 


// teardown watchers 


If (vm,_watcher) { 


Vvm,_watcher ,teardown'( ) 


let L = vm._watchers, length 


while (I--) { 
vm,_watchers[I] 


.teardown() 


// remove reference from data ob 


// frozen object may not have observer ， 
If (vm._ data._ ob  ) 攻 
Vvm,_data. ob_ ,vmCcount-- 
】} 
已 全 Ganene[as 攻 noOOkee 
Vvm,_ isDestroyed = true 
// invoke destroy hooks on current rendered tree 
vm, patch_ __ (vm._vnode，null) 


// fire destroyed hook 
calJIHook(vm， 'destroyed ' ) 
XUEEUTnEOTEEalUTTStancenstenmers 
Vvm,$off() 
// remove VUue Teference 
If (vm.$e1) 攻 
Vvm.,$el,vue_ ”= nu]1 
】} 
力作 releasecrncularrerenrerce 杯 ( 夫 6759) 
If (vm.$vnode) 革 
vm.$vnode,parent = _ null 
} 
】} 


beforeDestroy 钩子 函数 的 执行 时 机 是 在 $destroy 画 数 执行 最 开始 的 地 方 ， 接 着 执行 了 一 系列 的 
销毁 动作 ， 包 括 从 _parent 的 $children 中 删 掉 自身 ， 删 除 watcher ， 当 前 演 染 的 VNode 执行 
销毁 钧 子 函 数 等 ， 执 行 完 毕 后 再 调用 destroy 钩子 函数 。 


在 $destroy 的 执行 过 程 中 ， 它 又 会 执行 vm. patch_(vm.,_vnode，nul1) 触发 它 子 组 件 的 销毁 
钩子 函数 ， 这 样 一 层 层 的 递 妇 调用 ， 所 以 destroy 钩子 函数 执行 顺序 是 先 子 后 父 ， 和 mounted 过 
程 一 样 。 


activated & deactivated 


activated 和 deactivated 钩子 函数 是 专 门 为 ”keep-alive 组 件 定制 的 钧 子 ， 我 们 会 在 介绍 
keep-alive 组 件 的 时 候 详细 介绍 ， 这 里 先 留 个 悬念 。 


总 结 
这 一 节 主 要 介绍 了 Vue 生命 周期 中 各 个 钧 子 函 数 的 执行 时 机 以 及 顺序 ， 通 过 分 析 ， 我 们 知道 了 如 在 

created 钩子 函数 中 可 以 访问 到 数据 ， 在 mounted 钩子 本 数 中 可 以 访问 到 DOM， 在 destroy 钓 
子 函 数 中 可 以 做 一 些 定 时 器 销毁 工作 ， 了 解 它们 有 利于 我 们 在 合适 的 生命 周期 去 做 不 同 的 事情 。 


组 件 注 册 


在 Vue.js 中 ， 除了 它 内 置 的 组 件 如 keep-alive 、 component 、 transition 、 transition- 
group 等 ， 其 它 用 户 自 定义 组 件 在 使 用 前 必须 注册 。 很 多 同学 在 开发 过 程 中 可 能 会 遇 到 如 下 报错 信 


/EN 。 


Unknown custom elJement: <Xxx> - did you register the component correctJy? 
For recursive components，make Sure to provide the "name” option.,' 


一 般 报 这 个 错 的 原因 都 是 我 们 使 用 了 未 注册 的 组 件 。Vue.js 提供 了 2 种 组 件 的 注册 方式 ， 全 局 注册 和 局 
部 注册 。 接 下 来 我 们 从 源码 分 析 的 角度 来 分 析 这 两 种 注册 方式 。 


全 局 注册 
要 注册 一 个 全 局 组 件 ， 可 以 使 用 vue,.component(tagName，options) 。 例 如 : 


Vue,component('my-component '， 苹 
// 选项 
了]) 


那么 ， Vue.Ccomponent 函数 是 在 什么 时 候 定义 的 呢 ， 饭 的 定义 过 程 发 生 在 最 开始 初始 化 Vue 的 全 局 
本 数 的 时 候 ， 代 人 码 在 src/core/gLobal-api/assets.js 中 : 


Import { ASSET_TYPES } from "shared/constants ' 
Import { IsPJLainobject，YVvalidateCcomponentName } from ".,.V/util/index' 


export function initAssetRegisters (Vue: GlobalAPI) 苹 
[大 
* _ Create asset registration methods ， 
0 
ASSET_TYPES .forEach(type => 《{ 
Vue[type] = function (人 
工人 引 :Ss 世 rangF 
defanataon 有 Eunctaonagll OobJjec 
JEREEUnCEaonillIObTECE 二 | 攻 VOEQIE 人 人 
If (!definition) 攻 
return this,options[type + '"s ][Lid] 
) else 攻 
ESEanDUILWEOIOIGEESHi 0 


If (process,env.NODE_ENV !== "production'”&& type === component ' ) 攻 
ValidateCcomponentName(id ) 

If (type === ' component && isPlLainobject(definition)) 攻 
definition.name = definition.name || Id 


definition = this.options,_base,.extend(definition) 


if (type === 'directive' && typeof definition === "function' ) 攻 
definition = { bind: definition，update: definition } 

于 

this.options[type + 'S ][id] = definition 

return definition 


】) 


本 数 首先 逗 历 AsSsET_TYPES ， 得 到 type 后 挂 载 到 Vue 上 。 ASsSsET_TYPES 的 定义 在 


Src/shared/constants ,js 上 


export const ASSET_TYPES = [ 
"component ' ， 
darectIVe 
站 本 巧 6T 


所 以 实际 上 Vue 是 初始 化 了 3 个 全 局 函数 ， 并 且 如 果 type 是 component 且 definition 是 一 个 
对 象 的 话 ， 通 过 this.opitons. base.extend ， 相当 于 Vvue.extend 把 这 个 对 象 转换 成 一 个 继承 
于 Vue 的 构造 画 数 ， 最 后 通过 this.options[type + 's'][id] = definition 把 它 挂 载 到 


Vue,options.components 目 5 


由 于 我 们 每 个 组 件 的 创建 都 是 通过 vue.extend 继承 而 来 ， 我 们 之 前 分 析 过 在 继承 的 过 程 中 有 这 么 一 
段 逻 辑 : 


Sub .options = mergeoptions( 
Super .options， 
extendoptions 


也 就 是 说 它 会 把 vue.options 合并 到 sub.options ， 也 就 是 组 件 的 optinons 上 ， 然后 在 组 件 
的 实例 化 阶段 ， 会 执行 merge options 逻辑 ， 把 sub.options.components 合并 到 


Vvm.$options,.components 上 。 


然后 在 创建 vnode 的 过 程 中 ， 会 执行 _createElement 方法， 我 们 再 来 回顾 一 下 这 部 分 的 逻辑 ， 它 
的 定义 在 src/core/vdom/create-element.js 中 : 


export function _createELement (人 
context: Component， 
tad22 scrng 同 Class<=Component=luEunectaonalEobJlecte 
data?: VNodeData， 
Gilidrenzeeanmy2 
normalizationType?: number 
): VNode | Array<VNode> 并 
/NA 


Jet vnode，ns 


If (typeof tag === "string ) 荆 
Jet Ctor 
ns = (context.$vnode && context ,$vnode,.ns) || config.getTagNamespace(tag ) 


If (config,.iIsReservedTag(tag) ) 攻 
// platform built-Iin elements 
Vvnode = new VNode( 
config.parsePlatformTagName(tag)，data，children， 
undefined，undefined，context 
) 
} else if (isDef(Ctor = resolveAsset(context.$options， ' components ，tag))) 攻 
// component 
vnode = createCcomponent(Ctor，data，context，children，tag) 
} else ({ 
// unknown or unlisted namespaced elements 
// check at runtime because it may get assigned a_namespace when Its 
// parent normalizes children 
Vvnode = new VNode( 
tag，data，children， 
undefined，undefined，context 


】} 
TelLse 王 人 


// direct component options / constructor 
vnode = createCcomponent(tag，data，context，children) 
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这 里 有 一 个 判断 逻辑 isDpef(Ctor = resolveAsset(context.$options，'components'，tag)) ， 先 
来 看 一 下 _ resolveAsset 的 定义 ， 在 src/core/utils/options.js 中 : 


[ 
“ResoOlVeEamEassete 
“nsfhunctonasuseuiopecausercnuianstancesineedqaccess 
“touassetsuidefanedanats ancestonichan 
0 

export function resolveAsset ( 

options: object'/ 
type: String， 
2 芒 SalgTnje 
warnMissing?: boolean 
): any 攻 
/* lstanbul 1Ignore 工 */ 
If (typeof id !== "string' ) 攻 
eu 
】} 
const assets = options[type] 
// check local registration variations first 
If (hasown(assets，id)) return assets[id] 


const came1lizedId = cameJlize(id) 

If (hasown(assets，camelizedId)) return assets[came1lizedId] 
const PascalCcaseId = capitalize(camelizedId ) 

If (hasown(assets，PascalCaseId)) return assets[PascalCaseId] 
// fallback to prototype chain 


const res = assets[id] || assets[camelizedId] || assets[PascalCcaseId] 
If (process.env.NODE_ENV !== "production”&& warnMissing && !res) 革 
Warn( 
IEanieditowresolveeEktypesslcel9 EECOd 
options 
) 
】} 
Reunanmaes 
】} 


这 段 逻 辑 很 简单 ， 先 通过 const assets = options[type] 拿 到 assets ， 然 后 再 尝试 拿 
assets[id] ， 这 里 有 个 顺序 ， 先 直接 使 用 id 拿 ， 如 果 不 存在 ， 则 把 id 变 成 驼峰 的 形式 再 拿 ， 
如 果 仍 然 不 存在 则 在 驼峰 的 基础 上 把 首 字 母 再 变 成 大 写 的 形式 再 拿 ， 如 果 仍 然 拿 不 到 则 报错 。 这 样 说 
明了 我 们 在 使 用 vue.component(id，definition) 全 局 注册 组 件 的 时 候 ，id 可 以 是 连 字 符 、 弦 峰 或 
首 字母 大 写 的 形式 。 


那么 回 到 我 们 的 调用 resoLveAsset(context ,$options，'components'，tag) ， 即 拿 
vm.$options.components[tag] ， 这 样 我 们 就 可 以 在 resolveAsset 的 时 候 拿 到 这 个 组 件 的 构造 范 
数 ， 并 作为 ”createcomponent 的 钧 子 的 参数 。 


局 部 注册 


Vue.js 也 同样 支持 局 部 注册 ， 我 们 可 以 在 一 个 组 件 内 部 使 用 components 选项 做 组 件 的 局 部 注册 ， 例 
如 : 


Import HelloworJld from '",/VcomponentSs/VHe11LowWor1d ' 


export default 1{ 
Components: { 
Hel1Lowor1ld 


其 实 理 解 了 全 局 注册 的 过 程 ， 局 部 注册 是 非常 简单 的 。 在 组 件 的 Vue 的 实例 化 阶段 有 一 个 合 

option 的 逻辑 ， 之 前 我 们 也 分 析 过 ， 所 以 就 把 components 合并 到 vm.$options.components 
上 ， 这 样 我 们 就 可 以 在 resolveAsset 的 时 候 拿 到 这 个 组 件 的 构造 画 数 ， 并 作为 createcomponent 
的 钧 子 的 参数 。 


注意 ， 局 部 注册 和 全 局 注册 不 同 的 是 ， 只 有 该 类 型 的 组 件 示 可 以 访问 局 部 注册 的 子 组 件 ， 而 全 局 注册 
是 扩展 到 vue.options 下 ， 所 以 在 所 有 组 件 创建 的 过 程 中 ， 都 会 从 全 局 的 
Vvue.options.components 扩展 到 当前 组 件 的 vm.$options.components 下 ， 这 就 是 全 局 注册 的 组 
件 能 被 任意 使 用 的 原因 。 
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结 


|w 
E 


通过 这 一 小 节 的 分 析 ， 我 们 对 组 件 的 注册 过 程 有 了 认识 ， 并 理解 了 全 局 注册 和 局 部 注册 的 差异 。 其 实 


在 平时 的 工作 中 ， 当 我 们 使 用 到 组 件 库 的 时 候 ， 


往往 更 通用 基础 组 件 都 是 全 局 注册 的 ， 而 编写 的 特例 


场景 的 业务 组 件 都 是 局 部 注册 的 。 了 解 了 它们 的 原理 ， 对 我 们 在 工作 中 到 底 使 用 全 局 注册 组 件 还 是 局 


部 注册 组 件 是 有 这 非常 好 的 指导 意义 的 。 


异步 组 件 


在 我 们 平时 的 开发 工作 中 ， 为 了 减少 首 屏 代码 体积 ， 往 往 会 把 一 些 非 首 屏 的 组 件 设 计 成 异步 组 件 ， 按 
需 加 载 。Vue 也 原生 支持 了 红 步 组 件 的 能 力 ， 如 下 : 


Vue component ( 'async-example'，Tfunction (resolve，reject) 革 
// 这 个 特殊 的 require 语法 告诉 webpack 
// 自动 将 编译 后 的 代码 分 割 成 不 同 的 块 ， 
// 这 些 块 将 通过 Ajax 请 求 自 动 下 载 。 
redquire(['./Vmy-async-component ']，resolve) 


}) 


示例 中 可 以 看 到 ，Vue 注册 的 组 件 不 再 是 一 个 对 象 ， 而 是 一 个 工 三 本 数 ， 画 数 有 两 个 参数 resolve 
和 reject ， 画 数 内 部 用 setTimout 模拟 了 异步 ， 实 际 使 用 可 能 是 通过 动态 请 求 异 步 组 件 的 JS 地 
址 ， 最 终 通过 执行 resolve 方法 ， 它 的 参数 就 是 我 们 的 异步 组 件 对 象 。 


在 了 解 了 有 异步 组 件 如 何 注册 后 ， 我 们 从 源码 的 角度 来 分 析 一 下 它 的 实现 。 


上 一 节 我 们 分 析 了 组 件 的 注册 逻辑 ， 由 于 组 件 的 定义 并 不 是 一 个 普通 对 象 ， 所 以 不 会 执行 
Vvue .extend 的 逻辑 把 它 变 成 一 个 组 件 的 构造 画 数 ， 但 是 它 仍然 可 以 执行 到 createcomponent 画 
数 ， 我 们 再 来 对 这 个 画 数 做 回顾 ， 它 的 定义 在 src/core/vdom/ycreate-component/js 中 : 


export function createCcomponent (人 
CEOmJClass<Component= 司 l Eunctaonmi 川 Objectal vod， 
data: ?3VNodeData， 
COntexescCcomponent 
children: ?Array<VNode>， 
ageSEang 
: VNode | Array<VNode> | void 区 
If (isUndef(Ctor)) 革 
Eeeuri 


这 


const baseCtor = context,.$options,_base 


// plain options object: turn it into a constructor 
If (Isobject(Ctor)) 攻 
Ctor = baseCctor .extend(Ctor ) 


汐 A 


// async component 
Jet asyncFactory 
If (isUndef(Ctor.cid)) 攻 
asSyncFactory = Ctor 
Ctor = resolveAsyncComponent (asyncFactory，baseCctor，context ) 


If (Ctor === undefined) 攻 
// return a placeholder node for async component，which is rendered 
// as a comment node but preserves all the raw information for the node， 
// the information will be used for async server-rendering and hydration， 
return createAsyncPJlaceholder( 
aSyncFactory， 
data， 
Context， 
children， 
tag 


我 们 省 略 了 不 必要 的 逻辑 ， 只 保留 关键 逻辑 ， 由 于 我 们 这 个 时 候 传 人 的 ctor 是 一 个 画 数 ， 那 么 它 也 
并 不 会 执行 Vue .extend 逻辑 ， 因此 它 的 cid 是 undefiend 和 进入 了 异步 组 件 创 建 的 逻辑 。 这 里 
首先 执行 了 ctor = resolveAsyncComponent (asyncFactory，baseCctor，context ) 方法 ， 它 的 定 


义 在 src/core/vdom/helpers/resolve-async-component.js 中 : 


export function resolveAsyncComponent (人 
actorysFEunctaon: 
baseCctor: Class<Component>， 
context: Component 
): Class<Component> | void 攻 
If (isTrue(factory,.error) && IsDef(factory ,errorComp )) 区 
return factory,.errorComp 


If (isDef(factory.resolved)) 攻 
return factory.resolved 


If (isTrue(factory,.1oading) && IsDef(factory,1LoadingCcomp )) 攻 
return factory.1oadingCcomp 


If (IsDef(factory,contexts)) 革 
// already pending 
factory.contexts,.push(context ) 

else { 
const contexts = factory,.contexts = [context] 
Jet Sync = true 


Const forceRender = () => { 
for (let IL= 0， 1 = contexts. length; 工 < 工 I++) 攻 
contexts[I].$forceUpdate( ) 


const resolve = once((res: 0bject | Class<Component>) => 攻 
cacheaiesovyedg 
factory,.resolved = ensurecCtor(res，basector) 


// invoke callbacks only if this is not aa Synchronous resolve 
// (async resolves are shimmed as Synchronous during SSR) 
If (!Sync) 攻 
forceRender () 
} 
天 


const reject = once(reason => 1{ 
process.env.NODE_ENV !== "production”&& warn( 
“Failed to resolve async component : ${fString(factory)} ”+ 
(reasonE2aNnReasonm' SreasonhaE nn 
) 
If (isDef(factory.errorComp)) 攻 
factory ,error = true 
forceRender () 
了]) 


const res = factory(resolve，reject ) 


If (isobject(res)) 
if (typeof res.,then === 'function') { 
// () => Promise 
If (isUndef(factory.resolved)) 攻 
res.then(resolve，reject) 


} else if (IsDef(res,component ) && typeof res,component .then === 'function ') 
res,component .then(resolve，reject ) 
If (isDef(res.error)) { 


factory.errorComp = ensureCctor(res,error，basecCctor) 


If (isDef(res. Joading)) 攻 
factory.1oadingCcomp = ensurector(res,1Loading，basector) 


If (res.delay === 0) 六 
factory.1oading = true 
) else ({ 


SetTimeout(() => 
If (IsUndef(factory,resolved) && isUndef(factory.error)) 攻 
factory. Joading = true 
forceRender () 


}，res.delay || 200) 


If (isDef(res.timeout)) 六 
SetTimeout(() => { 
If (isUndef(factory,.resolved)) 1{ 


reject( 
process.env.NODE_ENV !== "production' 
zcimeout(l$tresstameoutyms) 站 
UL 
) 
} 
}，res.timeout ) 


Sync = false 
// return in case resolved Synchronous1y 
return factory.1oading 

? factory,1oadingCcomp 

: factory.resolved 


resolveAsyncComponent 本 数 的 逻辑 略 复杂 ， 因 为 它 实 际 上 处 理 了 3 种 异步 组 件 的 创建 方式 ， 除 了 
刚 示 示例 的 组 件 注 册 方 式 ， 还 支持 2 种 ， 一 种 是 支持 Promise 创建 组 件 的 方式 ， 如 下 : 


Vue.component ( 
"async-webpack-examp1le '， 
// 该 `import ”本 数 返回 一 个 “Promise ”对 象 。 
() => import('./my-async-component ' ) 


const AsyncComp = () => ({ 
// 需要 加 载 的 组 件 。 应 当 是 一 个 Promise 
Component : import('",./VMyComp.vue ' )， 
// 加 载 中 应 当 演 染 的 组 件 
Joading: LoadingCcomp， 
// 出 错时 泻 染 的 组 件 
error: ErrorComp， 
// 泻 染 加 载 中 组 件 前 的 等 待 时 间 。 默 认 : 200ms。 
deJay: 200， 
// 最 长 等 待 时 间 。 超 出 此 时 间 则 渲染 错误 组 件 。 默 认 : Infinity 
timeout : 3000 
]) 


Vue.component( ' async-exampJe'，AsyncCcomp ) 


那么 解 下 来 ， 我 们 就 根据 这 3 种 异步 组 件 的 情况 ， 来 分 别 去 分 析 _ resolveAsynccomponent 的 逻辑 。 


普通 辆 数 异 步 组 件 


针对 普通 本 数 的 情况 ， 前 面 几 个 证 判断 可 以 忽略 ， 它 们 是 为 高 级 组 件 所 用 ， 对 于 factory.contexts 
的 判断 ， 是 考虑 到 多 个 地 方 同 时 初始 化 一 个 异步 组 件 ， 那 么 它 的 实际 加 载 应 该 只 有 一 次 。 接 着 进入 实 
际 加 载 罗 辑 ， 定 义 了 forceRender 、 resolve 和 reject 画 数 ， 注 意 resolve 和 reject 画 
数 用 once 画 数 做 了 一 层 包 装 ， 它 的 定义 在 src/shared/util.js 中 : 


六 
* Ensure a function ls called onlLy once. 
0 
expormteftunctaonEoncealtnmEuncton) EUnctaon 人 
let called = false 
FEeturnnaunetcaonm (证 
If (!called) 1{ 
called = true 
fn.apply(this，arguments) 
} 
】} 
】} 


once 逻辑 非常 简单 ， 传 人 一 个 函数 ， 并 返回 一 个 新 函数 ， 它 非常 巧妙 地 利用 闭 包 和 一 个 标志 位 保证 
了 它 包 装 的 函数 只 会 执行 一 次 ， 也 就 是 确保 resolve 和 reject 画 数 只 执行 一 次 。 


接 下 来 执行 const res = factory(resolve，reject) 逻辑 ， 这 块 儿 就 是 执行 我 们 组 件 的 工厂 函 
数 ， 同 时 把 resolve 和 reject 画 数 作为 参数 传人 ， 组 件 的 工厂 本 数 通常 会 先 发 送 请 求 去 加 载 我 们 
的 异步 组 件 的 JS 文件 ， 拿 到 组 件 定义 的 对 象 res _ 后， 执行 resolve(res) 导 辑 ， 它 会 先 执行 


factory.resolved = ensureCtor(res，basector ) 


function ensurector (comp: any，base) 攻 


全 夺 ( 

comp ,esModujle | 

(hasSymbol && comp[Sympol,.toStringTag] === 'Module ') 
) 

comp = comp ,defauJ]t 
】} 


return Isobject(comp) 
? base.extend(comp ) 
: Comp 


这 个 范 数 目的 是 为 了 保证 能 找到 异步 组 件 JS 定义 的 组 件 对 象 ， 并 且 如 果 它 是 一 个 普通 对 象 ， 则 调用 
Vvue.extend 把 它 转换 成 一 个 组 件 的 构造 本 数 。 


resolve 逻辑 最 后 判断 了 sync ， 显 然 我 们 这 个 场景 下 sync 为 false， 那 么 就 会 执行 
forceRender 本 数 ， 它 会 逼 历 factory,contexts ， 拿 到 每 一 个 调用 异步 组 件 的 实例 vm , 执行 
vm,.$forceUpdate() 方法 ， 它 的 定义 在 Src/core/instance/1Lifecycle.js 中 : 


Vue,.prototype.$forceUpdate = function () { 
const vm: Component = this 
If (vm,_watcher) { 
vm,_watcher ,update( ) 


由 
】} 


$forceUpdate 的 逻辑 非常 简单 ， 就 是 调用 泻 染 watcher 的 Update 方法 ， 让 滨 染 watcher 对 
应 的 回调 本 数 执行 ， 也 就 是 触发 了 组 件 的 重新 演 染 。 之 所 以 这 么 做 是 因为 Vue 通常 是 数据 驱动 视图 重 
新 演 染 ， 但 是 在 整个 异步 组 件 加 载 过程 中 是 没有 数据 发 生变 化 的 ， 所 以 通过 执行 $forceupdate 可 以 
强制 组 件 重新 泻 染 一 次 。 


Promise 异步 组 件 


Vue,.component ( 
"async-webpack-examp1le '， 
// 该 `import” 画 数 返回 一 个 “Promise ” 对 象 。 
() => import('./my-async-component ' ) 


) 


webpack 2+ 支持 了 异步 加 载 的 语法 糖 : () => import('./my-async-component') ， 当 执行 完 res 
= factory(resolve，reject) ， 返回 的 值 就 是 Import('./Vmy-async-component ' ) 的 返回 值 ， 它 是 
一 个 _pPromise 对 象 。 接 着 进入 让 条件 ， 又 判断 了 typeof res.then === 'function') ， 条 件 满 
足 ， 执 行 : 


If (IsUndef(factory,resolved)) 
res.then(resolve，reject ) 


当 组 件 异 步 加 载 成 功 后 ， 执 行 resolve ， 加 载 失败 则 执行 reject ， 这 样 就 非常 巧妙 地 实现 了 配合 
webpack 2+ 的 异步 加 载 组 件 的 方式 〈 Promise ) 加 载 异 步 组 件 。 


融 级 异步 组 件 


由 于 异步 加 载 组 件 需 要 动态 加 载 JS， 有 一 定 网 络 延 时 ， 而 且 有 加 载 失 败 的 情况 ， 志 以 通常 我 们 在 开发 
异步 组 件 相 关 逻 辑 的 时 候 需要 设计 loading 组 件 和 error 组 件 ， 并 在 适当 的 时 机 滨 染 它 们 。Vue.js 2.3+ 支 
持 了 一 种 高 级 异步 组 件 的 方式 ， 它 通过 一 个 简单 的 对 象 配置 ， 帮 你 搞定 loading 组 件 和 error 组 件 的 泻 
染 时 机 ， 你 完全 不 用 关心 细节 ， 非 常 方便 。 接 下 来 我 们 就 从 源码 的 角度 来 分 析 高 级 异步 组 件 是 怎么 实 
现 的 。 


const AsyncComp = () => (({ 
// 需要 加 载 的 组 件 。 应 当 是 一 个 Promise 
Component : import('",./VMyComp.vue ' )， 
// 加 载 中 应 当 泻 染 的 组 件 
Joading: LoadingCcomp， 
// 出 错时 泻 染 的 组 件 
error: ErrorComp， 
// 泻 染 加 载 中 组 件 前 的 等 待 时 间 。 默 认 : 200ms。 
deJay: 200， 
// 最 长 等 待 时 间 。 超 出 此 时 
timeout : 3000 

了 ) 


Vue.component( ' async-exampJe'，AsyncCcomp ) 


间 则 谊 染 错 误 组 件 。 默 认 : Infinity 


高 级 异步 组 件 的 初始 化 逻辑 和 普通 异步 组 件 一 样 ， 也 是 执行 resolveAsyncCcomponent ， 当 执行 完 
res = factory(resolve，reject) ， 返 回 值 丈 是 定义 的 组 件 对 象 ， 显 然 满足 else if 

(isDef(res.component) && typeof res.component then === 'function') 的 逻辑 ， 接 着 执行 
res.component ,then(resolve，reject ) ， 当 异 步 组 件 加 载 成 功 后 ， 执行 resolve ) 失败 执行 


reject 。 


因为 异步 组 件 加 载 是 一 个 异步 过 程 ， 它 接着 又 同步 执行 了 如 下 逻辑 : 


If (IsDef(res,.error)) { 
factory.errorComp = enSsurector(res,.error，basecCctor ) 


If (IsDef(res. loading)) { 
factory. JoadingCcomp = ensurector(res.1Loading，basecCtor ) 


If (res.delay === 0) 革 
factory,1oading = true 
Telse 


SetTimeout(() => { 
If (isUndef(factory.resolved) && isUndef(factory.error)) 攻 
factory,.1oading = true 
forceRender () 


}，res.delay || 200) 


If (IsDef(res.timeout)) 攻 
SetTimeout(() => 并 
If (isUndef(factory.resolved)) 荆 


reject( 
process,.env.NODE_ENV !== :production' 
?3 timeout ($tresstimeout}jms) 
nu]] 
) 


}，res,timeout ) 


先 判 断 res.error 是 否定 义 了 error 组 件 ， 如 果 有 的 话 则 赋值 给 factory.errorcomp 。 接着 判断 
res.1oading 是 否定 义 了 loading 组 件 ， 如 果 有 的 话 则 赋值 给 factory.1Loadingcomp ， 如 果 设 置 了 
res.delay 且 为 0， 则 设置 factory.1loading = true ， 否 则 延 时 delay 的 时 间 执 行 : 


If (IsUndef(factory,resolved) && isuUndef(factory.error)) 攻 
factory,1oading = true 
forceRender () 


最 后 判断 res.timeout ， 如 果 配 置 了 该 项 ， 则 在 res.timout 时 间 后 ， 如 果 组 件 没 有 成 功 加 载 ， 执 


行 reject 。 


在 reSolveAsyncComponent 的 最 后 有 一 段 逻 辑 : 


Sync = false 

return factory, Loading 
? factory,. oadingCcomp 
: factory.resolved 


如 果 delay 配置 为 0， 则 这 次 直接 泻 染 loading 组 件 ， 否 则 则 延 时 delay 执行 forceRender ， 那 
么 又 会 再 一 次 执行 到 resolveAsyncComponent 。 


那么 这 时 候 我 们 有 几 种 情况 ， 按 逻辑 的 执行 顺序 ， 对 不 同 的 情况 做 判断 。 


异步 组 件 加 载 大 败 
当 异步 组 件 加 载 失败 ， 会 执行 reject 画 数 : 


const reject = once(reason => { 
process.env.NODE_ENV !== production” && warn( 
iEanleditomcesolvVewasynccomponent' EtstrrngtfactoryJ) 作 + 
(reason ?3 “AnReason: $freason} : ”) 
) 
If (isDef(factory.errorComp)) 攻 
factory,error = true 
forceRender () 
】} 
了]) 


这 个 时 候 会 把 factory,error 设置 为 true ， 同 时 执行 forceRender() 再 次 执行 到 


resolveAsyncComponent 


If (isTrue(factory.error) && isDef(factory ,errorComp)) 革 
return factory.errorComp 


一 


那么 这 个 时 候 就 返回 factory.errorCcomp ， 直 接 泻 染 error 组 件 。 


异步 组 件 加 载 成 功 


当 异步 组 件 加 载 成 功 ， 会 执行 resolve 画 数 : 


const resolve = once((res: 0bject | Class<Component>) => 攻 
factory.resolved = ensurecCtor(res，basecCtor ) 
If (!Sync) 荆 
forceRender () 
】 
]) 


首先 把 加 载 结果 缓存 到 factory.resolved 中 ， 这 个 时 候 因 为 sync 已 经 为 false， 则 执行 
forceRender() 再 次 执行 到 resolveAsyncComponent 


If (IsDef(factory,resolved)) 
return factory.resolved 


那么 这 个 时 候 直 接 返回 factory,resolved ， 浑 染 成 功 加 载 的 组 件 。 


异步 组 件 加 载 中 


如 果 异 步 组 件 加 载 中 并 未 返回 ， 这 时 候 会 走 到 这 个 逻辑 : 


If (isTrue(factory. loading) && isDef(factory,LoadingCcomp )) { 
return factory. JoadingCcomp 


那么 则 会 返回 factory.1loadingcomp ， 泻 染 loading 组 件 。 
异步 组 件 加 载 超时 


如 果 超 时 ， 则 走 到 了 reject 逻辑 ， 之 后 逻辑 和 加 载 失 败 一 样 ， 演 染 error 组 件 。 


异步 组 件 patch 


回 到 createcomponent 的 逻辑 : 


Ctor = resolveAsyncComponent (asyncFactory，baseCctor，context) 
If (Ctor === undefined) 革 
return createAsyncPJlaceholder( 


asyncFactory， 
data， 
Context， 
children， 

tag 


如 果 是 第 一 次 执行 resolveAsyncCcomponent ， 除 非 使 用 高 级 异步 组 件 6 delay 去 创建 了 一 个 
loading 组 件 ， 否 则 返回 是 _undefiend ， 接 着 通过 createAsyncPlaceholder 创建 一 个 注释 节点 作 
为 占 位 符 。 它 的 定义 在 src/core/vdom/helpers/resolve-async-components.js 中 : 


export function createAsyncPlaceholder (人 
factory: Function， 

data: ?3VNodeData， 

context: Component， 

children: ?Array<VNode>， 

tag: ?String 

2 VNode { 

const node = createEmptyVNode() 


\ 一 


node,.asyncFactory = factory 
node.asyncMeta ={ data，context，children，tag } 
return node 


实际 上 就 是 就 是 创建 了 一 个 占 位 的 注释 VNode， 同 时 把 asyncFactory 和 asyncMeta 赋值 给 当前 


Vvnode 。 


当 执 行 forceRender 的 时 候 ， 会 触发 组 件 的 重新 泻 染 ， 那 么 会 再 一 次 执行 
resolveAsynccomponent ， 这 时 候 就 会 根据 不 同 的 情况 ， 可 能 返回 loading、error 或 成 功 加 载 的 异步 
组 件 ， 返 回 值 不 为 undefined ， 因 此 就 走 正 常 的 组 件 render 、 _ patch 过程， 与 组 件 第 一 次 演 染 
流程 不 一 样 ， 这 个 时 候 是 存在 新 旧 _vnode 的 ， 下 一 章 我 会 分 析 组 件 更 新 的 patch 过程。 


总 结 
通过 以 上 代码 分 析 ， 我 们 对 Vue 的 异步 组 件 的 实现 有 了 深入 的 了 解 ， 知 道 了 3 种 异步 组 件 的 实现 方 
式 ， 并 且 看 到 高 级 异步 组 件 的 实现 是 非常 巧妙 的 ， 它 实现 了 loading、resolve、reject、timeonut 4 种 状 
态 。 异 步 组件 实 现 的 本 质 是 2 次 演 染 ， 除 了 0 delay 的 高 级 异步 组 件 第 一 次 直接 泻 染 成 loading 组 件 
外 ， 其 它 都 是 第 一 次 泻 染 生成 一 个 注释 节点 ， 当 异步 获取 组 件 成 功 后 ， 再 通过 forceRender 强制 重 
新 泻 染 ， 这 样 就 能 正确 泻 染 出 我 们 异步 加 载 的 组 件 了 。 


深入 啊 应 式 原 理 


前 面 2 章 介绍 的 都 是 Vue 怎么 实现 数据 演 染 和 组 件 化 的 ， 主 要 讲 的 是 初始 化 的 过 程 ， 把 原始 的 数据 最 
终 映 射 到 DOM 中 ， 但 并 没有 涉及 到 数据 变化 到 DOM 变化 的 部 分 。 而 Vue 的 数据 驱动 除了 数据 泻 染 


DOM 之 外 ， 还 有 一 个 很 重要 的 体现 就 是 数据 的 变更 会 触发 DOM 的 变化 。 


实 前 端 开 发 最 重要 的 2 个 工作 ， 一 个 是 把 数据 泻 染 到 页 面 ， 另 一 个 是 处 理 用 户 交 互 。Vue 把 数据 泻 


其 
染 到 页 面 的 能 力 我 们 已 经 通过 源码 分 析出 其 中 的 原理 了 ， 但 是 由 于 一 些 用 户 交 互 或 者 是 其 它 方 面 导致 


数据 发 生变 化 重新 对 页 面 演 染 的 原理 我 们 还 未 分 析 。 
考虑 如 下 示例 : 


<div Id="app"”@click='"changeMsg"> 


{{ message 】}} 
</div> 


var app = new Vue({ 
el 苹 appie 
data: 荆 
message: "Hello Vuel 
】， 
methods: 攻 
changeMsg() 攻 
this,message = 'Hel1lo Wor1ldl! 
】} 
】} 
了]) 


当 我 们 去 修改 this.message 的 时 候 ， 模 板 对 应 的 插值 也 会 泻 染 成 新 的 数据 ， 那 么 这 一 切 是 怎么 做 至 


的 呢 ? 


在 分 析 前 ， 我 们 先 直 观 的 想 一 下 ， 如 果 不 用 Vue 的 话 ， 我 们 会 通过 最 简单 的 方法 实现 这 个 需求 : 监听 


1 


点 击 事件 ， 修 改 数据 ， 手 动 操 作 DOM 重新 泻 染 。 这 个 过 程 和 使 用 Vue 的 最 大 区 别 就 是 多 了 一 步 手 动 


操作 DOM 重新 演 染 ”。 这 一 步 看 上 去 并 不 多 ， 但 它 背 后 又 潜在 的 几 个 要 处 理 的 问题 : 
1. 我 需要 修改 哪 块 的 DOM ? 
2. 我 的 修改 效率 和 性 能 是 不 是 最 优 的 ? 
3. 我 需要 对 数据 每 一 次 的 修改 都 去 操作 DOM 吗 ? 


4. 我 需要 case by case 去 写 修 改 DOM 的 逻辑 吗 ? 


如 果 我 们 使 用 了 Vue， 那 么 上 面 几 个 问题 Vue 内 部 就 帮 你 做 了 ， 那 么 Vue 是 如 何在 我 们 对 数据 修改 后 


自动 做 这 些 事情 呢 ， 接 下 来 我 们 将 进入 一 些 Vue 响应 式 系 统 的 底层 的 细节 。 


深入 响应 式 原理 
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啊 应 式 对 象 

可 能 很 多 小 伙伴 之 前 都 了 解 过 Vue.js 实现 响应 式 的 核心 是 利用 了 ES5 的 object.defineProperty ， 
这 也 是 为 什么 Vue.js 不 能 兼容 IE8 及 以 下 浏览 器 的 原因 ， 我 们 先 来 对 它 有 个 直观 的 认识 。 
Object.defineProperty 


object .defineProperty 方法 会 直接 在 一 个 对 象 上 定义 一 个 新 属性 ， 或 者 修改 一 个 对 象 的 现 有 属 
性 ， 并 返回 这 个 对 象 ， 移 来 看 一 下 它 的 语法 : 


0bject ,defineProperty(obj，prop，descriptor) 


obj 是 要 在 其 上 定义 属性 的 对 象 ; prop 是 要 定义 或 修改 的 属性 的 名 称 ; descriptor 是 将 被 定义 
或 修改 的 属性 描述 符 。 

比较 核心 的 是 descriptor ， 它 有 很 多 可 选 键 值 ， 具 体 的 可 以 去 参阅 它 的 文档 。 这 里 我 们 最 关心 的 是 
get 和 set ， get 是 一 个 给 属性 提供 的 getter 方法 ， 当 我 们 访问 了 该 属性 的 时 候 会 触发 getter 方 
法 ，set 是 一 个 给 属性 提供 的 setter 方法 ， 当 我 们 对 该 属性 做 修改 的 时 候 会 触发 setter 方法 。 


一 旦 对 象 拥有 了 getter 和 setter， 我 们 可 以 简单 地 把 这 个 对 象 称 为 响应 式 对 象 。 那 么 Vue.js 把 哪些 对 象 
变 成 了 响应 式 对 象 了 呢 ， 接 下 来 我 们 从 源码 层面 分 析 。 


initState 


在 Vue 的 初始 化 阶段 ， _init 方法 执行 的 时 候 ， 会 执行 initstate(vm) 方法 ， 它 的 定义 在 


Src/Vcore/instance/state,.]js 中 。 


export function initState (vm: Component ) 于 
vm,_watchers = [] 
const opts = vm.$options 
If (opts,.props) initProps(vm，opts.props ) 
If (opts.methods) InitMethods(vm，opts,methods ) 
If (opts.data) 革 
InitData(vm) 
Telse 1{ 
observe(vm,_data = {}，true /“ asRootData ”*/) 
】 
if (opts,computed) initCcomputed(vm，opts,computed ) 
If (opts,watch && opts,watch !== nativewatch) { 
Initwatch(vm，opts.watch) 
】} 
】} 


initState 方法 主要 是 对 props 、 methods 、 data 、 computed 和 wathcer 等 属性 做 了 初 
始 化 操作 。 这 里 我 们 重点 分 析 props 和 data ， 对 于 其 它 属 性 的 初始 化 我 们 之 后 再 详细 分 析 。 


e initProps 


function initProps (vm: Component，propsoptions: Object) 攻 
const propsData = vm.$options.propsData || 癸 
const props = vm._props = 全 
// cache prop keys So that future props updates can iterate Using Array 
// instead of dynamic object key enumeration ， 
const keys = vm.$options,_propkeys = [] 
const 1ISRoot = !Vm.$parent 
// root instance props Shou1ld be converted 
If (!iSRoot) { 
toggleobserving(false) 
} 
for (const key In propsoptions) { 
keys,push(key ) 
const Value = ValidateProp(key，propsoptions，propsData，Vvm) 
/* 1lIstanbul 1Ignore elLlse */ 
If (process,.env.NODE_ENV !== ' production' ) 革 
const hyphenatedKkey = hyphenate(key ) 
If (IsReservedAttribute(hyphenatedKkKey) || 
config.iIisReservedAttr(hyphenatedKkey)) { 
warn( 
`“"${thyphenatedkey}"” is a reserved attribute and cannot be Used as compone 
DOPDRR 
Vm 


} 
defineReactive(props，Kkey，Vvalue，() => { 
If (vm.$parent && !IisUpdatingchildCcomponent ) 革 
warn( 

LAVonudmutatzngaipropEdnrnrectIy sancentnevalueiwrllsbea t+ 
LOVerwrattenewnemevenestheparenmticomponenmeinesrenders + 
Instead use audataior computed property basedion thne prop s + 
“Value， Prop being mutated: "$ftkey}"”， 
Vm 


】} 


了]) 
Telse { 


defineReactive(props，key，Vvalue) 
} 
// static props are already proxied on the component 'S _ prototype 
// during Vue,.extend()， WwWe only need to proxy props defined at 
ansktanmcrataonilinere 
if (!(key in vm)) 攻 

proxy(vm， _props ，key) 


】} 
toggleobserving(true) 


props 的 初始 化 主要 过 程 ， 就 是 瑰 历 定义 的 props 配置 。 通 历 的 过 程 主 要 做 两 件 事 情 : 一 个 是 调 
用 defineReactive 方法 把 每 个 prop 对 应 的 值 变 成 响应 式 ， 可 以 通过 vm._props.xxx 访问 到 定 
义 props 中 对 应 的 属性 。 对 于 defineReactive 方法 ， 我 们 稍 后 会 介绍 ; 另 一 个 是 通过 proxy 
把 vm._props.xxx 的 访问 代理 到 vm.xxx 上 ， 我 们 稍 后 也 会 介绍 。 


e initData 


function initData (vm: Component ) 攻 
let data = vm.$options .data 


data = vVm,_data = typeof data === 'function'， 
? getData(data，Vvm) 
: data || 全 
if (!isPlLain0bject(data)) { 
data = 1{} 
process.env.NODE_ENV !== ' production” && warn( 


"data functions should return an object:NXn' + 
"https:V/vuejs.org/v2/Xguide/components .htm]#data-Must-Be-a-Function'， 
Vm 


// proxy data on instance 
const keys = 0bject.keys(datal) 
const props = vm.$options.props 
const methods = vm.$options ,methods 
let 工 = keys. Length 
while (I--) 革 

const key = keys[i] 


If (process.env.NODE_ENV !== "production' ) 革 
If (methods && hasown(methods，Kkey)) { 
warn( 


Method "${tkey}"”has already been defined as a data property. ， 


Vm 
) 
】} 
If (props && hasown(props，key)) 革 
process.env.NODE_ENV !== "production”&& warn( 
iirnesdaktagDroDerntya tkeyhosEanreadydeclaredwiasEagpropi 
"Use prop default value instead,，， 
Vm 
) 


} else if (!isReserved(key)) 攻 
proxy(vm， _data ， key) 


】} 


// observe data 


observe(data，true /* asRootData */) 


data 的 初始 化 主要 过 程 也 是 做 两 件 事 ， 一 个 是 对 定义 data 画 数 返回 对 象 的 通 历 ， 通 过 proxy 
把 每 一 个 值 vm._data.xxx 都 代理 到 vm.xxx 上 ; 另 一 个 是 调用 observe 方法 观测 整个 data 
的 变化 ， 把 data 也 变 成 响应 式 ， 可 以 通过 vm., data.xxx 访问 到 定义 data 返回 函数 中 对 应 的 
属性 ， observe 我 们 稍 后 会 介绍 。 


可 以 看 到 ， 无 论 是 props 或 是 data 的 初始 化 都 是 把 它们 变 成 响应 式 对 象 ， 这 个 过 程 我 们 接触 到 几 
个 画 数 ， 接 下 来 我 们 来 详细 分 析 它 们 。 


proxy 


首先 介绍 一 下 代理 ， 代 理 的 作用 是 把 props 和 data 上 的 属性 代理 到 vm 实例 上 ， 这 也 就 是 为 什 
么 比如 我 们 定义 了 如 下 props， 却 可 以 通过 vm 实例 访问 到 它 。 


let comP = 并 
props: { 
msg: "hel11o' 
}， 
methods: 攻 
Say() 芋 
console.1og(this.msg) 
】} 
】} 
】} 


我 们 可 以 在 say 画 数 中 通过 this.msg 访问 到 我 们 定义 在 props 中 的 msg ， 这 个 过 程 发 生 在 
proxy 阶段 : 


const sharedPropertyDefinition = 并 
enumerable: true， 
configurable: truey， 
get : noop， 
Set: noop 


】} 


export functaon proxy (target:， Object，sourceKkKey'” string， key: stringh) 1 
sharedPropertyDefinition,.get = function proxyGetter () 六 
return this[sourceKkey][key] 
】} 
sharedPropertyDefinition.set = function proxySetter (val) 攻 
this[sourceKkey][key] = val 
】} 
Object .defineProperty(target，Kkey，sharedPropertyDefinition) 
】} 


proxy 方法 的 实现 很 简单 ， 通 过 object.defineProperty 把 target[sourcekey][key] 的 读 写 
变 成 了 对 target[key] 的 读 写 。 所 以 对 于 props 而 言 ， 对 vm._props.xxx 的 读 写 变 成 了 
vm,.xxx 的 读 写 ， 而 对 于 vm._props.xxx 我 们 可 以 访问 到 定义 在 props 中 的 属性 ， 所 以 我 们 就 可 
以 通过 vm.xxx 访问 到 定义 在 props 中 的 xxx 属性 了 。 同 理 ， 对 于 data 而 言 ， 对 
vm,，data.xxxx 的 读 写 变 成 了 对 vm.xxxx 的 读 写 ， 而 对 于 vm._data.xxxx 我 们 可 以 访问 到 定义 
在 data 本 数 返回 对 象 中 的 属性 ， 所 以 我 们 就 可 以 通过 vm.xxxx 访问 到 定义 在 data 画 数 返回 对 
象 中 的 xxxx 属性 了 。 


observe 
observe 的 功能 就 是 用 来 监测 数据 的 变化 ， 它 的 定义 在 src/core/observer/index,js 中 : 


到 
* Attempt to create an observer Instance for a Value， 
* returns the new observer if successful1y observed ， 
* Or the existing observer if the Value already has one， 
0 
export functloniobserveu(values any asRootData 2boolean)i observer lvVord 1 
If (!isobject(value) || value Instanceof VNode) { 
euran 
} 
let ob: Observer | void 
If (hasown(value， ob  '，) && value,_ ob instanceof Observer ) 荆 
ob = Value.,_ ob 
} else if ( 
Shouldobserve && 
!ISServerRendering() && 
(Array.isArray(value) || IsPJlainobject(value)) && 
0bject ,IsSEXxtenslible(value) && 
1!IValue.,_ IsSVue 
) 攻 
ob = new Observer(value) 
} 
If (asRootData && ob) 1{ 
ob ,.vVmCount++ 


j 


return ob 


observe 方法 的 作用 就 是 给 非 VNode 的 对 象 类 型 数据 添加 一 个 _ observer ， 如 果 已 经 添加 过 则 直接 
返回 ， 否则 在 满足 一 定 条 件 下 去 实例 化 一 个 _ observer 对 象 实例 。 接 下 来 我 们 来 看 一 下 _ observer 
的 作用 。 


Observer 


observer 是 一 个 类 ， 它 的 作用 是 给 对 象 的 属性 添加 getter 和 setter， 用 于 依赖 收集 和 派发 更 新 : 


] 
“0ObserVvemnuiclass thnatasuattachneditoeacnuobserved 
* object， once attached，the observer converts the target 
* object's property keys into getter/vsetters that 
* Collect dependencies and dispatch updates ， 
0 
export class Observer { 
Value: any 
dep: Dep 
VvmCcount : number， // number of vms that has this object as root $data 


constructor (value: any) 
this.value = Value 
this.dep = new Dep() 
this.vmCount = 9 
def(value， ' ”ob _  '，this) 
If (Array,IsArray(Value)) { 
const augment = hasProto 
2 protoAugment 
copyAugment 
augment(value，arrayMethods，arrayKkeys ) 
this,observeArray(VvValue) 
elseE 
thizs,walk(vValue) 


[ 
* Walk through each property and convert them Into 
* getter/vsetters. This method should only be called when 
* Value type 1s Object . 
2 

walk (obj: Object) 攻 
const keys = Object.keys(obj) 
for (let 工 = 0;) 工 < keys,length; I++) 六 

defineReactive(obj，keys[I]) 


[大 
* 0Observe a list of Array Items 
斌 7 
observeArray (Items: Array<any>) 
EOm(RLE 0 刘 = 三 EDEemssieng 世 hy 二 TD) 
observe(iIitems[iI]) 


observer 的 构造 西数 逻辑 很 简单 ， 首 先 实 例 化 pep 对象， 这 块 稍 后 会 介绍 ， 接 着 通过 执行 def 
本 数 把 自身 实例 添加 到 数据 对 象 value 的 _ ob 属性 上 ，def 的 定义 在 
src/core/util/lang.js 中 : 


WE 
* Define a property.， 
2 
export functionudef tobj object key strng val any enunmerable2: boolean) 放 二 
0bject.defineProperty(obj，key，({ 
Value: Vval， 
enumerable: !!Ienumerab]le， 
writable: true， 
configurable: true 


}) 


def 画 数 是 一 个 非常 简单 的 object .defineProperty 的 封装 ， 这 就 是 为 什么 我 在 开发 中 输出 
data 上 对 象 类 型 的 数据 ， 会 发 现 该 对 象 多 了 一 个 ob_” 的 属性 。 


回 到 observer 的 构造 丁 数 ， 接 下 来 会 对 value 做 判断 ， 对 于 数组 会 调用 observeArray 方法 ， 
否则 对 纯 对 象 调 用 walk 方法 。 可 以 看 到 observeArray 是 有 逼 历数 组 再 次 调用 observe 方法 ， 而 
walk 方法 是 瑰 历 对 象 的 key 调用 defineReactive 方法 ， 那 么 我 们 来 看 一 下 这 个 方法 是 做 什么 
的 。 


defineReactive 


defineReactive 的 功能 就 是 定义 一 个 响应 式 对 象 ， 给 对 象 动 态 添 加 getter 和 setter， 它 的 定义 在 


Src/Vcore/observer/Vindex,.Jjs 中 : 


] 赤 
* Define a _ reactive property on an Object， 
0 

export function defineReactive (人 

obj :0bject， 

key: string 

val: any， 

CustomSetter?: ?Function， 
Shallow?: boolean 


JE 


const dep = new Dep() 


const property = 0bject.getownPropertyDescriptor(obj，Kkey ) 
If (property && property.configurable === false) 攻 
return 


// cater for pre-defined getter/Vsetters 
const getter = property && property .get 


const Setter = property && property .Set 
if ((!getter || setter) && arguments, length === 2) { 
val = obj[key]j] 


let childob = !shallow && observe(Vval) 
0bject.defineProperty(obj，key，({ 
enumerable: true， 
configurabJle: true， 
getnafunctionmnreactaveGetter (放下 攻 
const Value = getter ? getter .call(obj) : val 
If (Dep,target) 革 
dep.depend () 
If (childob) 攻 
childob.dep.depend () 
If (Array. IsArray(value)) { 
dependArray(Vvalue) 


】} 


return Value 
所 
set function reactiVvesSetter (newVal)  { 
const Value = getter ? getter ,call(obj) : val 
/* eslint-disable no-Sself-compare */ 
If (newVval === Value || (newval !== newVval && value !== Value)) 1{ 
eu 
} 
/* eslint-enable no-selLf-compare */ 
If (process,.env.NODE_ENV !== 'production”&& customSetter ) 
CustomsSetter() 
} 
If (setter) 攻 
Setter.cal1l(obj，newval) 
Jelsee tf 
Vval = newVal 
} 
childob = !Sshallow && observe(newvVal) 
dep.notify() 


}) 


defineReactive 酚 数 最 开始 初始 化 pep 对 象 的 实例 ， 接 着 拿 到 obj 的 属性 描述 符 ， 然 后 对 子 对 
象 递 娄 调 用 observe 方法， 这样 就 保证 了 无 论 obj 的 结构 多 复杂 ， 它 的 所 有 子 属性 也 能 变 成 响应 
式 的 对 象 ， 这 样 我 们 访问 或 修改 obj 中 一 个 撕 套 较 竣 的 属性 ， 也 能 触发 getter 和 setter。 最 后 利用 
object.defineProperty 去 给 obj 的 属性 key 添加 getter 和 setter。 而 关于 getter 和 setter 的 有 具 
体 实 现 ， 我 们 会 在 之 后 介绍 。 


4 


结 


|w 
E 


这 一 节 我 们 介绍 了 响应 式 对 象 ， 核 心 就 是 利用 object.defineproperty 给 数据 添加 了 getter 和 
setter， 目 的 就 是 为 了 在 我 们 访问 数据 以 及 写 数 据 的 时 候 能 自动 执行 一 些 逻 和 辑 : getter 做 的 事情 是 依赖 收 
集 ，setter 做 的 事情 是 派发 更 新 ， 那 么 在 接 下 来 的 章节 我 们 会 重点 对 这 两 个 过 程 分 析 。 


依赖 收集 


通过 上 一 节 的 分 析 我 们 了 解 Vue 会 把 普通 对 象 变 成 响应 式 对 象 ， 响 应 式 对 象 getter 相关 的 逻辑 就 是 做 
依赖 收集 ， 这 一 区 我 们 来 详细 分 析 这 个 过 程 。 


我 们 先 来 回顾 一 下 getter 部 分 的 逻辑 : 


export function defineReactive (人 
0bjiu0bjecty 
key: String， 
VvVal: any， 
CustomSetter?: ?Function， 
Shallow?: boolean 

JE 


const dep = new Dep() 


const property = 0bject.getownPropertyDescriptor(obj，key ) 
If (property && property,.configurable === false) 
return 


// cater for pre-defined getter/setters 

const getter = property && property ,get 

const Setter = property && property .Set 

if ((!getter || setter) && arguments, length === 2) { 
val = obj[key]j] 


Jet childob = !shallow && observe(Vval ) 
0bject .defineProperty(obj，key，({ 
enumerab]le: true， 
configurable: truey， 
detofunctionareactaiveGetteri 0) 有 | 
const Value = getter ? getter ,call(obj) : val 
If (Dep,target) 二 
dep.depend () 
If (childob) 攻 
childob ,dep.depend () 
If (Array.IsArray(Vvalue)) 革 
dependArray(Vvalue) 


】} 


return Value 


}， 
7 


}) 


这 段 代 码 我 们 只 需要 关注 2 个 地 方 ， 一 个 是 const dep = new Dep() 实例 化 一 个 pep 的 实例 ， 另 
一 个 是 在 get 本 数 中 通过 dep.depend 做 依赖 收集 ， 这 里 还 有 个 对 childobj 判断 的 逻辑 ， 我 们 
之 后 会 介绍 它 的 作用 。 


Dep 
Dep 是 整个 getter 依赖 收集 的 核心 ， 它 的 定义 在 Src/vcore/observer/Vdep .js 中 : 


Import type Watcher from ",./watcher' 


Import { _ remove } from ",,.Vutil/index' 
let uid = 0 
CR 


* Adep is an observable that can have mu1lLtiple 
* directives Subscribing to it ， 
玫 
exportidefault class Deptf 
Statlic target: ?Watcher ; 
Id: number ; 
Subs: Array<Watcher>， 


Goristnuckor( 全 天 二 
this.id = UId++ 
this.subs = [] 


addSub (Sub: Watcher ) { 
thizs,.Ssubs.push(Ssub) 


removeSub (Sub: Watcher) { 
remove(this.Ssubs，Ssub) 


】} 
depend () 荆 
If (Dep,target) 攻 
Dep.target.addDep(this ) 
】} 
】} 
notify () 革 
帮 生 skapalnzeseheEsupscrDermSs 蕊 全 is 站 
const Subs = this.subs.Sslice() 
for (let 工 = 0， = subs,Jlength; 工 < ) I++) 并 
Subs[i]l.update() 
】} 
】} 


// the current target watcher being evaluated . 

// this is globally unique because there could be only one 
// watcher being evaluated at any time ， 

Dep.target = nu]1l 

const targetStack = [] 


export function pushTarget (_target: ?Watcher ) 革 
If (Dep.target) targetStack.push(Dep.target) 
Dep.target = _target 


export function popTarget () 攻 
Dep.target = targetStack.pop() 


Dep 是 一 个 Class， 它 定义 了 一 些 属性 和 方法 ， 这 里 需要 特别 注意 的 是 它 有 一 个 静态 属性 target ， 
这 是 一 个 全 局 唯一 watcher ， 这 是 一 个 非常 巧妙 的 设计 ， 因 为 在 同一 时 间 只 能 有 一 个 全 局 的 
Watcher 被 计算 ， 另 外 它 的 自身 属性 subs 也 是 watcher 的 数组 。 


Dep 实际 上 就 是 对 watcher 的 一 种 管理 ， Dep 脱离 watcher 单独 存在 是 没有 意义 的 ， 为 了 完 
整地 讲 清 楚 依 赖 收集 过 程 ， 我 们 有 必要 看 一 下 watcher 的 一 些 相关 实现 ， 它 的 定义 在 


src/core/observer/watcher .js 中 : 


Watcher 
let uid = 0 
WE 人 


* A watcher parses an expresslion，collects dependencies， 
* and fires callback when the expression value changes ， 
UnasasausedfrorootcnatneSwatccnm( 放 EapoandadrectaVes 
攻 
export default cjlass Watcher 六 
vm: Component ， 
expression: String 
cb: Function， 
Id: number ; 
deep: boolean 
USser: boolean 
computed: boolean:; 
Sync: boolean 
dirty: boolean 
actlive: boolean 
dep: Dep 
deps: Array<Dep>， 
newDeps: Array<Dep>， 
depIds: SimpleSet ; 


newDepIds: SimpleSet， 
before: ?Function， 
getter: Function; 
Value: any 


ConSstructor (人 
vm: Component， 
exporFn: String | Function， 
cb: Function， 
options?: ?0bject， 
IsSRenderwatcher?: boolean 
) 荆 
thizs,vm = Vm 
If (isRenderwWatcher ) 攻 
vm,_watcher = this 


】} 

vm,_watchers.push(this) 

opDiEonms 

If (options) 革 
this,deep = !!options.deep 
this,uUser = !!options.uUser 
this,computed = !!options.computed 
thlis,.Ssync = !!options.sync 


this,before = options.before 
else ({ 


this,deep = this.user = this.computed = this,sync = false 


册 
this.cb = cb 


thlis.id = ++uid // uid for batching 

this,active = true 

this.dirty = this,.computed // for computed watchers 
this.deps = [] 

thizs,.newDeps = [] 

this,depIds = new Set() 

this.newDepIds = new Set() 


this.expression = process,.env,NODE_ENV !== "production' 


? exporFn,toString() 
// parse expression for getter 
If (typeof exporFn === 'function' ) 六 
thlis.getter = exporFn 
Telse 
thlis,.getter = parsePath(exporFn) 
工作 (Emossgetterny 王 4 
this.getter = function () 人 
process.env.NODE_ENV !== ' production”&& warn( 
“Failed watching path: "${expOorFn}+” ”+ 


"Watcher only accepts Simple dot-delimited paths ， 


nEOCDUULIWCOnkYO USEEahuUnetcroneonstead 
Vm 


十 


】} 

If (thIzs.computed) 攻 
this,VvValue = undefined 
this,dep = new Dep() 

else { 
this,Value = this,get() 


[次 
* Evaluate the getter，and re-collect dependencies . 
2 
get () 攻 
pushTarget(this) 
Jet value 
const vm = this,.Vvm 
IE 
Value = this.getter.call(vm，vm) 
JEcaccnaatey) 
If (this.user) 1 
handeErronkCen vyma gecteriftor watchera StnanssexpressIonh 
和 else 并 
throw e 
} 
站 mally 王 人 
Xe LOUCcn LeVvery propernty southey are altrackedias 
// dependenciles for deep watching 
ICGcnassdeepy) 昌 1 
traverse(value) 
} 
popTarget() 
this.cleanupDeps'( ) 
} 


return Value 


[ 
* Add a dependency to this directive. 
访 人 

addDep (dep: Dep) 世 

const ld = dep.id 
If (Ithis,newDepIds.has(id)) 1 
this,newDepIds.add(id) 
this,newDeps.push(dep) 
If (!this.depIds,.has(id)) 苹 
dep.addSub(this) 


] 交 
“ECleanupuitor dependenmcy collectron 
x / 

CleanupDeps () 1{ 

let 寺 = this.deps.JIength 
while (I--) { 
const dep = this,.deps[I] 
If (!this,newDepIds.has(dep,.id)) 六 
dep .removeSub(this ) 


】} 

let tmp = this.depIds 
this,depIds = this,.newDepIds 
this.newDepIds = tmp 
this,newDepIds.clear() 

tmp = this.deps 

this,deps = this.newDeps 
this,newDeps = tmp 
this,newDeps. length = 0 


watcher 是 一 个 Class， 在 它 的 构造 丁 数 中 ， 定 义 了 一 些 和 Dep 相关 的 属性 : 


this.deps = [] 
this,newDeps = [] 
this.depIds = new Set() 
this,newDepIds = new Set() 


其 中 ， this.deps 和 this.newDeps 表示 Watcher 实例 持 有 的 Dep 实例 的 数组 ; 而 
this.depIds 和 this.newDepIds 分 别 代表 this.deps 和 this.newDeps 的 id Set (这 个 
Set 是 ES6 的 数据 结构 ， 它 的 实现 在 src/core/util/env.js 中 ) 。 那 么 这 里 为 何 需 要 有 2 个 Dep 
实例 数组 呢 ， 稍 后 我 们 会 解释 。 


Watcher 还 定义 了 一 些 原型 的 方法 ， 和 依赖 收集 相关 的 有 get 、 addpep 和 cleanupDeps 方 
法 ， 单 个 介绍 它们 的 实现 不 方便 理解 ， 我 会 结合 整个 依赖 收集 的 过 程 把 这 几 个 方法 讲 清 楚 。 


过 程 分 析 


之 前 我 们 介绍 当 对 数据 对 象 的 访问 会 触发 他 们 的 getter 方法 ， 那 么 这 些 对 象 什 么 时 候 被 访问 呢 ? 还 记得 
之 前 我 们 介绍 过 Vue 的 mount 过 程 是 通过 mountcomponent 画 数 ， 其 中 有 一 段 比较 重要 的 逻辑 ， 大 
致 如 下 : 


updateComponent = () => { 
vm,_update(vm,_render()，hydrating ) 


new Watcher(vm，updateCcomponent，noop， 攻 


before () 
If (vm._ isMounted) 区 
cal1lHook(vm， 'beforeUpdate ' ) 
】} 
】} 


小 ETUCEA LSRenderwWakEchnere 人 


当 我 们 去 实例 化 一 个 演 染 watcher 的 时 候 ， 首 先进 入 watcher 的 构造 本 数 逻辑 ， 然 后 会 执行 它 的 
this.get() 方法 ， 进 入 get 画 数 ， 首 先 会 执行 : 


pushTarget(this) 


pushTarget 的 定义 在 SrcVcore/observer/Vdep .js 中 : 
export function pushTarget (_target: Watcher ) 荆 


If (Dep.target) targetStack,.push(Dep,target ) 
Dep.target = _target 


实际 上 就 是 把 pep.target 赋值 为 当前 的 泻 染 watcher 并 压 栈 (为 了 恢复 用 ) 。 接 着 又 执行 了 : 


Value = this.getter .call(vm，vm) 


this.getter 对 应 就 是 updateComponent 本 数 ， 这 实际 上 就 是 在 执行 : 


vm,_update(vm._render()，hydrating ) 


它 会 移 执 行 vm.,_render() 方法 ， 因 为 之 前 分 析 过 这 个 方法 会 生成 广 染 VNode， 并 且 在 这 个 过 程 中 
会 对 vm 上 的 数据 访问 ， 这 个 时 候 就 触发 了 数据 对 象 的 getter。 


那么 每 个 对 象 值 的 getter 都 持 有 一 个 dep ， 在 触发 getter 的 时 候 会 调用 dep.depend() 方法 ， 也 就 
会 执行 Dep.target.addDep(this) 。 


刚才 我 们 提 到 这 个 时 候 pep.target 已 经 被 赋值 为 演 染 watcher ， 那 么 就 执行 到 addpep 方法 : 


addDep (dep: Dep) { 

const id = dep.id 

if (!this.newDepIds.has(id)) 攻 
thizs.newDepIds.add(id) 
this,newDeps.push(dep) 
if (!this.dqepIds,has(id)) 苹 

dep.addSub(this) 

】} 

】} 


这 时 候 会 做 一 些 逻 辑 判 断 〈 保 证 同一 数据 不 会 被 添加 多 次 ) 后 执行 dep.addsub(this) ， 那 么 就 会 执 
行 this.subs.push(sub) ， 也 就 是 说 把 当前 的 watcher 订阅 到 这 个 数据 持 有 的 dep 的 subs 
中 ， 这 个 目的 是 为 后 续 数 据 变化 时 候 能 通知 到 哪些 subs 做 准备 。 


所 以 在 vm.,_render() 过 程 中 ， 会 触发 所 有 数据 的 getter， 这 样 实际 上 已 经 完成 了 一 个 依赖 收集 的 过 
程 。 那 么 到 这 里 就 结束 了 么 ， 其 实 并 没有 ， 再 完成 依赖 收集 后 ， 还 有 几 个 逻辑 要 执行 ， 首 先是 : 


下 CEIais 二 deepy 汪 人 
traverse(value ) 


这 个 是 要 递归 去 访问 value ， 触 发 它 所 有 子 项 的 getter ， 这 个 之 后 会 详细 讲 。 接 下 来 执行 


popTarget() 


popTarget 的 定义 在 Src/Vcore/observer/vdep .js 中 : 


Dep.target = targetStack.pop() 


实际 上 就 是 把 Dep.target 恢复 成 上 一 个 状态 ， 因 为 当前 vm 的 数据 依赖 收集 已 经 完成 ， 那 么 对 应 的 
泻 染 pep.target 也 需要 改变 。 最 后 执行 : 


this,cleanupDeps() 


ee 1Vue 有 依赖 收集 的 过 程 ， ee 上 有 人 分 析 依 赖 请 空 的 过 程 ， 
其 实 这 是 大 部 分 同学 会 忽视 的 一 点 ， 也 是 Vue 考虑 特别 细 的 一 点 。 


cleanupDeps () 1{ 
let 工 = this.deps.Jlength 
while (I--) 
const dep = this,deps[i] 
If (!this.newDepIds.has(dep.id)) 攻 
dep.removeSub(this ) 
】} 
】} 
let tmp = this.depIds 
this,depIds = this,newDepIds 
this,newDepIds = tmp 
this,newDepIds.clear() 
tmp = this.deps 
this,deps = this.newDeps 
this,newDeps = tmp 
this,newDeps.Jength = 0 


考虑 到 Vue 是 数据 驱动 的 ， 丙 以 每 次 数据 变化 都 会 重新 render， 那 么 vm._render() 方法 又 会 再 次 执 
行 ， 并 再 次 触发 数据 的 getters， 所 以 _wathcer 在 构造 函数 中 会 初始 化 2 个 pep 实例 数 
组 ， newDeps 表示 新 添加 的 Dep 实例 数组 ， 而 deps 表示 上 一 次 添加 的 Dep 实例 数组 。 


在 执行 cleanupDeps 本 数 的 时 候 ， 会 首先 通 历 deps ， 移 除 对 dep 的 订阅 ， 然 后 把 newDepIds 
和 depIds 交换 ， newDeps 和 deps 交换 ， 并 把 newDpepIds 和 newDeps 清 至 。 


那么 为 什么 需要 做 deps 订阅 的 移 除 呢 ， 在 添加 deps 的 订阅 过 程 ， 已 经 能 通过 id 去 重 避 免 重复 
订阅 了 。 


考虑 到 一 种 场景 ， 我 们 的 模板 会 根据 v-if 去 泻 染 不 同 子 模 板 a 和 b， 当 我 们 满足 某 种 条 件 的 时 候 泻 
染 a 的 时 候 ， 会 访问 到 a 中 的 数据 ， 这 时 候 我 们 对 a 使 用 的 数据 添加 了 getter， 做 了 依赖 收集 ， 那 么 当 
我 们 去 修改 a 的 数据 的 时 候 ， 理 应 通知 到 这 些 订 阅 者 。 那 么 如 果 我 们 一 旦 改变 了 条 件 泻 染 了 模板 ， 
又 会 对 bb 使 用 的 数据 添加 了 getter， 如 果 我 们 没有 依赖 移 除 的 过 程 ， 那 么 这 时 候 我 去 修改 a 模板 的 数 
据 ， 会 通知 a 数据 的 订阅 的 回调 ， 这 显然 是 有 肖 费 的 。 


因此 Vue 设计 了 在 每 次 添加 完 新 的 订阅 ， 会 移 除 掉 旧 的 订阅 ， 这 样 就 保证 了 在 我 们 刚才 的 场景 中 ， 如 
果 泻 染 b 模板 的 时 候 去 修改 a 模板 的 数据 ，a 数据 订阅 回调 已 经 被 移 除 了 ， 所 以 不 会 有 任何 当 费 ， 真 的 
是 非常 赞 叹 Vue 对 一 些 细节 上 的 处 理 。 


这 疆 


4 了 呈 


通过 这 一 节 的 分 析 ， 我 们 对 Vue 数据 的 依赖 收集 过 程 已 经 有 了 认识 ， 并 且 对 这 其 中 的 一 些 细 做 了 分 
析 。 收 集 依赖 的 目的 是 为 了 当 这 些 响 应 式 数据 发 送 变化 ， 触 发 它们 的 setter 的 时 候 ， 能 知道 应 该 通知 哪 
些 订 阅 者 去 做 相应 的 逻辑 处 理 ， 我 们 把 这 个 过 程 叫 派 发 更 新 ， 其 实 watcher 和 Dep 就 是 一 个 非常 
经 典 的 观察 者 设计 模式 的 实现 ， 下 一 节 我 们 来 详细 分 析 一 下 派发 更 新 的 过 程 。 


泊 发 更 新 
通过 上 一 他 分 析 我 们 了 解 了 响应 式 数据 依赖 收集 过 程 ， 收 集 的 目的 就 是 为 了 当 我 们 修改 数据 的 时 候 ， 
可 以 对 相关 的 依赖 派发 更 新 ， 那 么 这 一 节 我 们 来 详细 分 析 这 个 过 程 。 


我 们 先 来 回顾 一 下 setter 部 分 的 逻辑 : 


[ 

* Define aa reactive property on an Object ， 
export function defineReactive (人 

0ObJE Object 

key: strrngr 

Valeany: 

customSetter?: ?Function， 

Shal1low?: boolean 


) 


const dep = new Dep() 


const property = 0bject.getownPropertyDescriptor(obj，Kkey) 
If (property && property.configurabJle === false) 区 
IEeEUurn 


// cater for pre-defined getter/vsetters 

const getter = property && property ,get 

const Setter = property && property .Set 

If ((!getter || setter) && arguments, length === 2) 革 
val = obj[key]j] 


let childob = !shallow && observe(Vval) 
0bject.defineProperty(obj，key，({ 
enumerab1le: true， 
configurabJle: truey， 
AT 
SetofunctaonireactIVesetterii(newyVadly) 
const Value = getter ? getter .call(obj) : Vval 
/* eslint-disable no-Sself-compare */ 
If (newVval === Value || (newval !== newVal && value !== Value)) { 
eunn 
】 
/* esSlint-enable no-Sself-compare */ 
If (process.env.NODE_ENV !== "production”&& customSetter ) 
CustomSetter () 
TUECSseEEerg 下 攻 
Setter.cal1l(obj，newval) 


else 1{ 
Vval = newVal 
} 
childob = !shallow && observe(newVval) 
dep.notify() 


}) 


setter 的 逻辑 有 2 个 关键 的 点 ， 一 个 是 childob = !shallow && observe(newval) ， 如 果 shallow 
为 false 的 情况 ， 会 对 新 设置 的 值 变 成 一 个 响应 式 对 象 ; 另 一 个 是 dep.notify() ， 通 知 所 有 的 订阅 
者 ， 这 是 本 节 的 关键 ， 接 下 来 我 会 带 大 家 完整 的 分 析 整 个 派发 更 新 的 过 程 。 


当 我 们 在 组 件 中 对 响应 的 数据 做 了 修改 ， 就 会 触发 setter 的 逻辑 ， 最 后 调用 dep.notify() 方法 ， 它 
是 Dep 的 一 个 实例 方法 ， 定 义 在 src/core/observer/dep .js 中 : 


class Dep 攻 
AAS 
notify () 并 
克 重 stabDaaazemeheEsubsecrabermelastkfias 比 
const Subs = this,subs,Sslice() 
for (let 工 = 0， 1 = Subs.length; 工 < ) I++) 革 
Subs[I]l,update() 


这 里 的 逻辑 非常 简单 ， 逗 历 所 有 的 subs ， 也 就 是 watcher 的 实例 数组 ， 然 后 调用 每 一 个 
watcher 的 update 方法 ， 它 的 定义 在 src/core/observer/watcher .js 中 : 


class Watcher 攻 
LE 
update () 革 
/* lstanbul 1Ignore elLse */ 
If (thzs.computed) 攻 
// A computed property watcher has two modes: lazy and activated ， 
// It initializes as lazy by default，and onlLy becomes activated when 
// it is depended on by at least one Subscriber，which Is typical1ly 
// another computed property or a component 's render function， 
If (this.dep.subs.Jength === 0) { 
// In lazy mode，we don't want to perform computations until necessary， 
// So we Simply mark the watcher as dirty， The actual computation IIS 
// performed just-in-time in this.evaluate() when the computed property 
帮 愈 ELEsEacecessedE 
this,dirty = true 
小 else 有 { 


// In activated mode，we want to proactively perform the computation 
// but only notify our subscribers when the value has indeed changed . 
this.getAndInvoke(() => 并 
this,dep.notify() 
]) 
} 
} else if (this.sync) { 
this,run() 
else 1{ 
queuewWatcher(this ) 


这 里 对 于 _ watcher 的 不 同 状态 ， 会 执行 不 同 的 逻辑 ， computed 和 sync 等 状态 的 分 析 我 会 之 后 
抽 一 小 节 详 细 介绍 ， 在 一 般 组 件数 据 更 新 的 场景 ， 会 走 到 最 后 一 个 queuewatcher(this) 的 还 
辑 ， queuewatcher 的 定义 在 src/core/observer/scheduler ,js 中 : 


const queue: Array<wWatcher> = [] 
let has: { [key: number]: ?true } = 全 
Jet Waiting = false 
Jet flushing = false 
[ 
* Push a watcher into the watcher gdqueue， 
* Jobs with duplicate IDSs will1 be skipped unless it's 
* pushed when the queue is being flushed . 
0 
export function queuewatcher (watcher: Watcher ) 区 
const id = watcher .Id 
if (has[id] == nul1) 六 
has[id] = true 
If (!flushing) 革 
queue .push(watcher ) 
让 esSeEEH 
// if already flushing，Splice the watcher based on ts id 
// if already past its lid，it will be run next immediately， 
let 奔 = queue,Jength - 工 
while ( 奔 > index && queue[i]l.id > watcher ,id) 攻 
jj 本 
} 
dueue,.Splice(I + 1， 090，watcher) 
】} 
/人 queuecnesnfuushn 
If (!waiting) 革 
waiting = true 
nextTick(flushSchedulerQueue ) 


这 里 引信 了 一 个 队列 的 概念 ， 这 也 是 Vue 在 做 派发 更 新 的 时 候 的 一 个 优化 的 点 ， 它 并 不 会 每 次 数据 改 
变 都 触发 watcher 的 回调 ， 而 是 把 这 些 watcher 先 添加 到 一 个 队列 里 ， 然 后 在 nextTick 后 执 
行 flushSschedulerQueue 。 


这 里 有 几 个 细节 要 注意 一 下 ， 首 先 用 has 对 象 保 证 同一 个 _watcher 只 添加 一 次 ; 接着 对 
flushing 的 判断 ，else 部 分 的 逻辑 稍 后 我 会 讲 ; 最 后 通过 wating 保证 对 
nextTick(flushschedulerQueue) 的 调用 逻辑 只 有 一 次 ， 另 外 _nextTick 的 实现 我 之 后 会 抽 一 小 节 
专门 去 讲 ， 目前 就 可 以 理解 它 是 在 下 一 个 tick， 也 就 是 异步 的 去 执行 flushSchedulerQueue 。 


接 下 来 我 们 来 看 flushschedulerQueue 的 实现 ， 它 的 定义 在 src/Vcore/observer/scheduler .js 
中 。 


let flushing = false 

let Index = 0 

[ 
* FlLush both queues and run the watchers . 
2 

functlion flushschedulerQueue () 并 
flushing = true 
Jet watcher，Id 


// Sort queue before flush . 

// This ensures that : 

// 1，Components are updated from parent to child， (because parent IIS always 
2 created before the child) 

// 2，A component 's user watchers are run before its render watcher (because 
0 USser watchers are created before the render watcher ) 

// 3, If a component is destroyed during a parent component 's watcher run， 
Ch Its watchers can be Skipped . 

dueue.Sort((a，b) => a,id - b.id) 


// do not cache length because more watchers might be pushed 
// as we run existing watchers 
for (index = 0; index < queue,Jlength; index++) 革 
watcher = queue[index] 
If (watcher ,before) 攻 
watcher .before( ) 
} 
Id = watcher .Id 
has[id] = nul1 
watcher .run() 
// jin dev build，check and stop circular updates . 
If (process.env.NODE_ENV !== :production”&& has[id] != nul1) 革 
Circular[id]l = (circular[id] || 90) + 工 
if (circular[id] > MAX_UPDATE_COUNT) { 
warn( 
"You may have an infinite Update loop " + (人 
watcher ,USser 
?aniwatcheriwthnuexpressronl $dwakcchnersexpression) 
"in a component render function., 


) 


watcher .VvVm 


) 


break 


】} 


// keep copies of post queues before resetting state 
const activatedQueue = activatedCchildren,slice() 
const updatedQueue = queue.sSlice() 


resetScheduJlerState() 


// call1 component updated and activated hooks 
calJlActivatedHooks(activatedQueue ) 
calJlUpdatedHooks(updatedQueue) 


// devtool hook 
/* Istanbul 1Ignore ff */ 
If (devtools && config.devtools) 荆 
devtools .emit( flush ' ) 
】} 
】} 


这 里 有 几 个 重要 的 逻辑 要 梳理 一 下 ， 对 于 一 些 分 支 逻 辑 如 keep-alive 组 件 相 关 和 之 前 提 到 过 的 
updated 钩子 函数 的 执行 会 略 过 。 


。 队列 排序 


queue.sort((a，b) => a.id - b,id) 对 队列 做 了 从 小 到 大 的 排序 ， 这 么 做 主要 有 以 下 要 确保 以 下 
几 点 : 


1 组件 的 更 新 由 父 到 子 ; 因为 父 组 件 的 创建 过 程 是 先 于 子 的 ， 所 以 _watcher 的 创建 也 是 先 父 后 子 ， 
执行 顺序 也 应 该 保持 和 父 后 子 。 


2. 用 户 的 自 定 义 watcher 要 优先 于 深 染 watcher 执行 ; 因为 用 户 自 定 义 watcher 是 在 深 染 
watcher 之 前 创建 的 。 


3. 如 果 一 个 组 件 在 父 组 件 的 _watcher 执行 期 间 被 销毁 ， 那 么 它 对 应 的 _ watcher 执行 都 可 以 被 跳 
过 ， 所 以 父 组 件 的 watcher 应 该 先 执 行 。 

se。 队列 遥 历 

在 对 queue 排序 后 ， 接 着 就 是 要 对 它 做 通 历 ， 拿 到 对 应 的 watcher ， 执 行 watcher.run() 。 这 


里 需要 注意 一 个 细节 ， 在 逼 历 的 时 候 每 次 都 会 对 queue.length 求 值 ， 因 为 在 watcher .run() 的 
时 候 ， 很 可 能 用 户 会 再 次 添加 新 的 watcher ， 这 样 会 再 次 执行 到 queuewatcher ， 如 下 : 


export function queuewWatcher (watcher: Watcher ) 攻 
const Id = watcher .id 
if (has[id] == nu]l1) 攻 


has[id] = true 
If (!flushing) 攻 
queue .push(watcher ) 
else 1{ 
// if already flushing，Splice the watcher based on its id 
// if already past its lid，it will be run next immediately， 
let 奔 = queue,length - 工 
while (II > index && queue[i]l.id > watcher ,id) 攻 
二 要 
} 


queue .splice(I + 1，0，watcher ) 


0 


可 以 看 到 ， 这 时 候 flushing 为 true， 就 会 执行 到 else 的 逻辑 ， 然 后 就 会 从 后 往 前 找 ， 找 到 第 一 个 待 
揪 入 _watcher 的 庆 比 当前 队列 中 watcher 的 庆 大 的 位 置 。 把 watcher 按照 id 的 插入 到 队列 
中 ， 因 此 queue 的 长 度 发 送 了 变化 。 


。 状态 恢复 


这 个 过 程 就 是 执行 resetSschedulerSstate 本 数 ， 它 的 定义 在 src/core/observer/scheduler.js 
中 。 


const queue: Array<Watcher> = [] 
let has: { [key: number]: ?true } = 全 
Jet circular: { [key: number]: number } = 全 
Jet Waiting = false 
Jet flushing = false 
Jet :Index = 0 
0 
ReseEaEnesscheduulersSsEaiEer 
0 
fiunccionanesetscneduuterstate 本 ( 似 下 《 
Index = queue,Jlength = activatedCchildren.1length = 9 


has = 1{} 

If (process.env.NODE_ENV !== "production' ) { 
Circular = 1{} 

】} 

wajliting = flushing = Talse 


逻辑 非常 简单 ， 束 是 把 这 些 控制 梳 程 状态 的 一 些 变量 恢复 到 初始 值 ， 把 watcher 队列 清空 。 
接 下 来 我 们 继续 分 析 watcher .run() 的 逻辑 ， 它 的 定义 在 src/core/observer/watcher .js 中 。 


Class Watcher 攻 
交 炎 


大 


Scheduler job interface . 


* Wil1l be called by the scheduler ， 
多 
run () 荆 


if (this.active) { 


this.getAndInvoke(this.cb) 


getAndInvoke (cb: Function) { 


const Value = this,get() 
车 ( 


Value !== thlis.Vvalue || 

// Deep watchers and watchers on Object/Arrays Shou1ld fire even 
// when the value 1Ss the Same，because the Value may 

// have mutated 

isobject(value) || 

this ,deep 


) 二 


// Set new Value 
const 01dvalue = this,.value 
this,.value = Value 
this,dirty = false 
TiGEnas 划 Use IO 还 
EX 
cb.call(this.vm， value，o01dVvalue ) 
Tcatchn (e) 《{ 
hand]leError(e，this.vm， callback for watcher "${tthis.expression}” ) 
} 
Telse Et 
cb.call(this.vm，Vvalue，o01dvalue) 


run 画 数 实际 上 就 是 执行 this.getAndInvoke 方法 ， 并 传人 watcher 的 回调 画 
数 。 getAndInvoke 画 数 逻辑 也 很 简单 ， 先 通过 this.get() 得 到 它 当前 的 值 ， 然 后 做 判断 ， 如 果 


满足 新 | 


日 值 不 等 、 新 值 是 对 象 类 型 、 deep 模式 任何 一 个 条 件 ， 则 执行 watcher 的 回调 ， 注 意 回调 


画 数 执行 的 时 候 会 把 第 一 个 和 第 二 个 参数 传人 新 值 value 和 旧 值 oldvalue ， 这 就 是 当 我 们 添加 自 
定义 watcher 的 时 候 能 在 回调 酚 数 的 参数 中 拿 到 新 旧 值 的 原因 。 


那么 对 于 渲染 watcher 而 言 ， 它 在 执行 this.get() 方法 求 值 的 时 候 ， 会 执行 getter 方法 : 


updateCcomponent = () => { 


Vm， 


_update(vm.,_render()，hydrating ) 


所 以 这 就 是 当 我 们 去 修改 组 件 相关 的 响应 式 数 据 的 时 候 ， 会 触发 组 件 重新 演 染 的 原因 ， 接 着 就 会 重新 
执行 patch 的 过 程 ， 但 它 和 首次 泻 染 有 所 不 同 ， 之 后 我 们 会 花 一 小 节 去 详细 介绍 。 


总 结 


通过 这 一 节 的 分 析 ， 我 们 对 Vue 数据 修改 派发 更 新 的 过 程 也 有 了 认识 ， 实 际 上 就 是 当 数据 发 生变 化 的 
时 候 ， 触 发 setter 逻辑 ， 把 在 依赖 过 程 中 订阅 的 的 所 有 观察 者 ， 也 就 是 _watcher ， 都 触发 它们 的 
update 过 程 ， 这 个 过 程 又 利用 了 队列 做 了 进一步 优化 ， 在 nextTick 后 执行 所 有 watcher 的 
run ， 最 后 执行 它们 的 回调 本 数 。 nextTick 是 Vue 一 个 比较 核心 的 实现 了 ， 下 一 节 我 们 来 重点 分 
析 它 的 实现 。 


nextTick 


nextTick 是 Vue 的 一 个 核心 实现 ， 在 介绍 Vue 的 nextTick 之 前 ， 为 了 方便 大 家 理解 ， 我 先 简 单 介绍 
一 下 JS 的 运行 机 制 。 


JSs 运行 机 制 
JS 执行 是 单线 程 的 ， 它 是 基于 事件 循环 的 。 事 件 循 环 大 致 分 为 以 下 几 个 步骤 : 
(1) 所 有 同步 任务 都 在 主线 程 上 执行 ， 形 成 一 个 执行 栈 (execution context stack) 。 


(2) 主线 程 之 外 ， 还 存在 一 个 "任务 队列 ”" (task queue) 。 只 要 异步 任务 有 了 运行 结果 ， 就 在 "任务 队 
列 "之 中 放置 一 个 事件 。 


(3) 一 旦 "执行 栈 " 中 的 所 有 同步 任务 执行 完毕 ， 系 统 就 会 读 取 " 任 务 队列 "， 看 看 里 面 有 哪些 事件 。 那 
些 对 应 的 异步 任务 ， 于 是 结束 等 待 状态 ， 进 入 执行 栈 ， 开 始 执行 。 


〈4) 主线 程 不 断 重 复 上 面 的 第 三 步 。 


< 


Event queue 


主线 程 的 执行 过 程 就 是 一 个 tick， 而 所 有 的 异步 结果 都 是 通过 “任务 队列 ”来 调度 被 调度 。 消息 队列 中 
存放 的 是 一 个 个 的 任务 (task) 。 规范 中 规定 task 分 为 两 大 类 ， 分 别 是 macro task 和 micro task， 并 且 
每 个 macro task 结束 后 ， 都 要 清空 所 有 的 micro task。 


关于 macro task 和 micro task 的 概念 ， 这 里 不 会 细 讲 ， 人 简单 通过 一 段 代 码 演示 他 们 的 执行 顺序 : 


nextTick 


for (macroTask of macroTaskQueue) 荆 


// 1，Handle current MACRO-TASK 
hand]leMacroTask( ) ; 


// 2， Handle al1l1 MICRO-TASK 
for (microTask of microTaskQueue) 
handleMicroTask(microTask ) ; 


在 浏览 器 环境 中 ， 稼 见 的 macro task 有 setTimeout、IMessageChannel、postMessage、setImmediate ; 各 
见 的 micro task 有 MutationObsever 和 Promise.then。 


Vue 的 实现 


在 Vue 源码 2.5+ 后 ， nextTick 的 实现 单独 有 一 个 JS 文件 来 维护 它 ， 它 的 源码 并 不 多 ， 总 共 也 就 
100 多 行 。 接 下 来 我 们 来 看 一 下 它 的 实现 ， 在 src/core/util/next-tick.js 中 : 


Import { noop } from "shared/util' 
Import { handJeError }》 from " ,Verror' 
Import { IsIOS，iiSsNative } from ",/env' 


const callbacks = [] 
let pending = false 


function flushCcallbacks () 攻 


pending = false 

const copies = callbacks,.Sslice(0) 
callbacks,. length = 0 

for (let 工 = 0;) 工 < copies.Jlength; I++) 荆 


copies[i]() 


Here we have async deferring wrappers using both microtasks and (macro) tasks ， 
In < 2.4 we used microtasks everywhere，but there are Some Scenar1lios where 
microtasks have too high a priority and fire in between Supposed1ly 

Sequential events (e.g. #4521，#6690) or even between bubbling of the same 
event (#6566) However，UuUsing (macro) tasks everywhere also has subtle problems 
when State ls changed right before repaint (e.g， #6813，out-in transitions ) , 
Here we Use microtask by default，but expose a way to force (macro) task when 
needed (e.g， in event handlers attached by Vv-on)， 


Jet microTimerFunc 


Jet macroTimerFunc 
Jet UseMacroTask = false 


光 
0 


Determine (macro) task defer Implementation ， 
Technically setImmediate Shou1ld be the Ideal choice，but it's only available 


CUD 
小 


nextTick 


// jin IE，The only polyfil1l that consistent1ly queues the callback after alL1 DOM 


// events triggered in the Same Loop is by using MessageCchanne1. 
ssStanoulssgmomreETT 
If (typeof setImmediate !== "undefined'”&& isNative(SsetImmediate)) { 
macroTimerFunc = () => 
SetImmediate(flushCallbacks ) 
} 
} else if (typeof MessageChannel1 !== "undefined && ( 
ISNative(MessageCchanne1L) | 
// PhantomJS 
MessageChanne1l.toString() === ' [object MessageCchanneJlConstructor]' 
)) 荆 
const channel = new MessageChannel() 
const port = channe1.port2 
channeJ.port1,onmessage = flushcal1lbacks 
macroTimerFunc = () => 并 
port.postMessage(1I) 
} 
) else 1{ 
/* 1Istanbul Ignore next */ 
macroTimerFunc = () => 革 
SetTimeout(fJlushCcallbacks，0) 


// Determine microtask defer :Implementation. 
/stanbul aignore next $flowsdisable=lane “7/ 
If (typeof Promise !== "undefined' && IsNatilive(Promise)) 攻 
const Pp = Promise.resolve() 
microTimerFunc = () => { 
p.then(flushCcallbacks ) 


// in problematic UIWebViews，Promise.then doesn't compJletely break，but 


0 
6 
0 
风 
让 证 
} 
) else 


it can get stuck in a weird state where callbacks are pushed into the 
microtask queue but the queue isn't being flushed，until the browser 
needs to do some other work，e.g. handle a timer ，Therefore we can 
"force"” the microtask queue to be flushed by adding an empty timer ， 
(IsSIOS) SetTimeout(noop) 


和 


// fallback to macro 
microTimerFunc = macroTimerFunc 


全 


* Wrap a function so that if any code inside triggers state change， 


* the changes are queued using a (macro) task instead of a microtask ， 
0 
export function withMacroTask (fn: Function): Function 攻 


return fn,_ withTask || (fn.,_ withTask = function () 攻 
USeMacroTask = true 
const res = fn,.apply(nul1，arguments) 


USeMacroTask = Talse 
returnares 


}) 


exponrtftunctaonnextTackktcb7zsFEUnctaonAnctx22: 0bjecb 有 At 


Jet _resolve 
Callbacks.push(() => { 
if (cb) { 
EX 量 上 
cb.call(ctx ) 
} catch (e) 六 


handJeError(e，ctx， nextTick ') 


】} 


} else if (_resolve) 六 
_resolve(ctx) 
】} 
了]) 
If (!pending) 攻 
pending = true 
If (useMacroTask) { 
macroTimerFunc() 
helse { 
microTimerFunc( ) 
】} 
】} 


// $flow-disable-ine 


if (!cb && typeof Promise !== undefined ') 六 


return new Promise(resolve => { 
_resolve = resolve 
了]) 
】} 


让 旦 心 


next-tick.js 申明 了 microTimerFunc 和 macroTimerFunc 2 个 变量 ， 它 们 分 别 对 应 的 是 micro 
task 的 函数 和 macro task 的 本 数 。 对 于 macro task 的 实现 ， 优 先 检 测 是 否 文 持 原生 setImmediate ， 

这 是 一 个 高 版 本 了 和 Edge 示 支 持 的 特性 ， 不 支持 的 话 再 去 检测 是 否 支 持原 生 的 ”Messagechannel ， 
如 果 也 不 支持 的 话 就 会 降级 为 setTimeout 6 ; 而 对 于 micro task 的 实现 ， 则 检测 浏览 器 是 否 原生 支 


持 Promise， 不 支持 的 话 直 接 指向 macro task 


的 实现 。 


next-tick.js 对 外 暴露 了 2 个 本 数 ， 先 来 看 _nextTick ， 这 就 是 我 们 在 上 一 节 执 行 
nextTick(flushSchedulerQueue ) 所 用 到 的 函数 。 它 的 逻辑 也 很 简单 ， 把 传人 的 回调 本 数 cb 压 人 
callbacks 数组 ， 最 后 一 次 性 地 根据 useMacroTask 条 件 执行 macroTimerFunc 或 者 是 
microTimerFunc ， 而 它们 都 会 在 下 一 个 tick 执行 flushcallbacks ， flushcallbacks 的 逻辑 非 
常 简单 ， 对 callbacks 逼 历 ， 然 后 执行 相应 的 回调 酚 数 。 


这 里 使 用 callbacks 而 不 是 直接 在 nextTick 中 执行 回调 函 数 的 原因 是 保证 在 同一 个 tick 内 多 次 执 
行 nextTick ， 不 会 开局 多 个 异步 任务 ， 而 把 这 些 异 步 任务 都 压 成 一 个 同步 任务 ， 在 下 一 个 tick 执行 


完毕 。 


nextTick 酚 数 最 后 还 有 一 段 逻 辑 : 


if (!cb && typeof Promise !== "undefined ' ) 攻 
return new Promise(resolve => { 
_resolve = resolve 


]) 
】} 


这 是 当 nextTick 不 传 cb 参数 的 时 候 ， 提 供 一 个 Promise 化 的 调用 ， 比 如 : 
nextTick().then(() => {) 


当 _resolve 酚 数 执行 ， 就 会 跳 到 then 的 逻辑 中 。 

next -tick,js 还 对 外 暴露 了 withMacroTask 本 数 ， 它 是 对 函数 做 一 层 包 装 ， 确 保函 数 执行 过 程 中 
对 数据 任意 的 修改 ， 触 发 变化 执行 nextTick 的 时 候 强制 走 macroTimerFunc 。 上 比如 对 于 一 些 DOM 
交互 事件 ,如 v-on 绑 定 的 事件 回调 本 数 的 处 理 ， 会 强制 走 macro tasko。 


总 结 
通过 这 一 人 对 nextTick 的 分 析 ， 并 结合 上 一 节 的 setter 分 析 ， 我 们 了 解 到 数据 的 变化 到 DOM 的 重 
新 泻 染 是 一 个 异步 过 程 ， 发 生 在 下 一 个 tick。 这 就 是 我 们 平时 在 开发 的 过 程 中 ， 比 如 从 服务 端 接口 去 获 


取 数 据 的 时 候 ， 数 据 做 了 修改 ， 如 果 我 们 的 某 些 方法 去 依赖 了 数据 修改 后 的 DOM 变化 ， 我 们 就 必须 在 
nextTick 后 执行 。 比 如 下 面 的 伪 代 码 : 


getData(res).then(()=>{ 
this, xxx = res.data 


this,.$nextTick(() => 荆 
// 这 里 我 们 可 以 获取 变化 后 的 DOM 
】) 
】) 


Vue.js 提供 了 2 种 调用 _ nextTick 的 方式 ， 一 种 是 全 局 API Vvue.nextTick ， 一 种 是 实例 上 的 方法 
vm.$nextTick ， 无 论 我 们 使 用 哪 一 种 ， 最 后 都 是 调用 next-tick.js 中 实现 的 nextTick 方法 。 


检测 变化 的 注意 事项 


通过 前 面 几 节 的 分 析 ， 我 们 对 响应 式 数据 对 象 以 及 它 的 geter 和 setter 部 分 做 了 了 和解， 但 是 对 于 一 些 特 
丈 情况 是 需要 注意 的 ， 接 下 来 我 们 就 从 源码 的 角度 来 看 Vue 是 如 何 处 理 这 些 特 殊 情 况 的 。 


对 象 添 加 属性 


对 于 使 用 object .defineProperty 实现 响应 式 的 对 象 ， 当 我 们 去 给 这 个 对 象 添 加 一 个 新 的 属性 的 时 
候 ， 是 不 能 够 触发 它 的 setter 的 ， 比 如 : 


var vm = new Vue({ 
data:T 
Qi 
】} 
了]) 
// vm.b 是 非 响应 的 
Vvm.b = 2 


但 是 添 加 新 属性 的 场景 我 们 在 平时 开发 中 会 经 常 遇 到 ， 那 么 Vue 为 了 解决 这 个 问题 ， 定 义 了 一 个 全 局 
API vue.set 方法 ， 它 在 src/core/global-api/index.js 中 初始 化 : 


Vue.Sset = Set 


这 个 set 方法 的 定义 在 src/core/observer/index.js 中 : 


O 
* Set a property on an object，Adds the new property and 
* triggers change notification If the property doesn't 
* Balready exist， 
兴 
export function set (target: Array<any> | 0bject， key any，VvVal， any): any 二 
If (process.env.NODE_ENV !== "production”&& 
(IsUndef(target) || IsPrimitive(target ) ) 
) 王 人 
warn( Cannot set reactive property on undefined，nul1，or primitive Value: ${f(t 
arget 且 anyj)) 
} 
If (Array.IsArray(target) && 1ISValidArrayIndex(key)) 苹 
target ,length = Mathn,max(target, Length，key) 
target.Splice(key，1，Vval) 
return Val 
】} 
If (key in target && !(key in 0bject,prototype)) 攻 
target[key] = val 
return Val 


】} 
const ob = (target: any)._ ob 
If (target._ isVue || (ob && ob.vmcCcount ) ) 
process.env.NODE_ENV !== production”&& warn( 
YAVomdEaddangFeackavVvepropentiesitoEaVuenmstanceormenesrootceSdatcaa 
anuncume declaresmrtiupftrontEntnewdatawoptrons 


) 


return VvVal 
出 
If (!ob) 

target[key] = Vval 

return val 
】} 
defineReactive(ob,.Vvalue，key，YVval) 
ob .dep.notify() 
return Val 


set 方法 接收 3 个 参数 ， target 可 能 是 数组 或 者 是 普通 对 象 ， key 代表 的 是 数组 的 下 标 或 者 是 对 
象 的 键 值 ， val 代表 添加 的 值 。 首 先 判断 如 果 target 是 数组 且 key 是 一 个 合法 的 下 标 ， 则 之 前 
通过 splice 去 添加 进 数 组 然后 返回 ， 这 里 的 splice 其 实 已 经 不 仅仅 是 原生 数组 的 splice 了 ， 
稍 后 我 会 详细 介绍 数组 的 逻辑 。 接 着 又 判断 key 已 经 存在 于 target 中 ， 则 直接 赋 值 返 回 ， 因 为 这 
样 的 变化 是 可 以 观测 到 了 。 接 着 再 获取 到 target._ob ”并 赋值 给 ob ， 之 前 分 析 过 它 是 在 
observer 的 构造 本 数 执行 的 时 候 初 始 化 的 ， 表 示 observer 的 一 个 实例 ， 如 果 它 不 存在 ， 则 说 明 
target 不 是 一 个 响应 式 的 对 象 ， 则 直接 赋值 并 返回 。 最 后 通过 defineReactive(ob.value，key， 
val) 把 新 添加 的 属性 变 成 响应 式 对 象 ， 然 后 再 通过 ob .dep.notify() 手动 的 触发 依赖 通知 ， 还 记 
得 我 们 在 给 对 象 添加 getter 的 时 候 有 这 么 一 段 逻 辑 : 


export function defineReactive (人 
DUObjiecte 
Key strangy 
val: any， 
CustomSetter?3: ?Function， 
Shal1Low?: boolean 
Js 
/人 
Jet childob = !shallow && observe(Vval ) 
0bject.defineProperty(obj，key，({ 
enumerable: true， 
configurable: true， 
getnafunctlonreactaveGcetterr (三 攻 
const Value = getter ? getter .call(obj) : val 
If (Dep,target) 革 
dep.depend () 
If (childob) 攻 
chlildob ,dep,.depend () 
If (Array.IsArray(Vvalue)) 革 
dependArray(Vvalue) 


】} 
】} 


return Value 


}， 
OA 


}) 
】} 


在 getter 过 程 中 关 断 了 childob ， 并 调用 了 childob.dep.depend() 收集 了 依赖 ， 这 就 是 为 什么 执 
行 vue.set 的 时 候 通 过 ob.dep.notify() 能 够 通知 到 watcher ， 从 而 让 添加 新 的 属性 到 对 象 也 
可 以 检测 到 变化 。 这 里 如 果 value 是 个 数组 ， 那 么 就 通过 dependArray 把 数组 每 个 元 素 也 去 做 依 
赖 收集 。 


数组 

接着 说 一 下 数组 的 情况 ，Vue 也 是 不 能 检测 到 以 下 变动 的 数组 : 

1. 当 你 利用 索引 直接 设置 一 个 项 时 ， 例如 : Vvm.Items[indexofItem] = newvalue 
2. 当 你 修改 数组 的 长 度 时 ， 例 如 : vm,items,.length = newLength 


对 于 第 一 种 情况 ， 可 以 使 用 : Vvue.set(example1,items，indexofItem，newvalue) ; 而 对 于 第 二 
情况 ， 可 以 使 用 vm.items.spLice(newLength) 。 


我 们 刚才 也 分 析 到 ， 对 于 vue.set 的 实现 ， 当 target 是 数组 的 时 候 ， 也 是 通过 
target.splice(key，1，val) 来 添加 的 ， 那 么 这 里 的 splice 到 底 有 什么 黑 魔 法 ， 能 让 添加 的 对 
象 变 成 响应 式 的 呢 。 


其 实 之 前 我 们 也 分 析 过 ， 在 通过 observe 方法 去 观察 对 象 的 时 候 会 实例 化 observer ， 在 它 的 构造 
画 数 中 是 专门 对 数组 做 了 处 理 ， 它 的 定义 在 src/core/observer/index.js 中 。 


export class Observer 1 
constructor (Value: any) 六 
this.value = Value 
this.dep = new Dep() 
this,VvmCount = 0 
def(value，' ob _  '，this) 
If (Array,.IsArray(vValue)) 攻 
const augment = hasProto 
?2 protoAugment 
: CopyAugment 
augment(value，arrayMethods，arrayKkeys ) 
this,observeArray(Vvalue) 
Telse at 
发 壤 王 交 
】} 


这 里 我 们 只 需要 关注 _ value 是 Array 的 情况 ， 首 先 获 取 augment ， 这 里 的 hasProto 实际 上 就 是 
判断 对 象 中 是 否 存在 proto_ ” ， 如 果 存 在 则 augment 指向 protoAugment ， 否则 指向 
copyAugment ， 来 看 一 下 这 两 个 函数 的 定义 : 


[wy 
* Augment an target Object or Array by intercepting 
* the prototype chain using proto 
人 

function protoAugment (target，Ssrc: 0bject，keys: any) 攻 
/* eslint-disable no-proto */ 


target ,proto_ = Src 

/* eslint-enable no-proto */ 
】} 
人 


* Augment an target Object or Array by defining 
* hidden properties . 
4 
/* Istanbul iIignore mext */ 
UnmCETOniEeopyAUgmenttarget objJect srec Object keys: Anrray<stranmg2) 下 人 
for (let IL= 0， 1 = keys,Jlength; 工 < ; I++) 六 
const key = keys[i] 
def(target，key，src[key]) 


protoAugment 方法 是 直接 把 target. proto_ ”原型 直接 修改 为 src ， 而 copyAugment 方法 
是 逼 历 keys， 通 过 def ， 也 就 是 object.defineProperty 去 定义 它 自 身 的 属性 值 。 对 于 大 部 分 现 
代 浏 览 器 都 会 走 到 protoAugment ， 那 么 它 实 际 上 就 把 value 的 原型 指向 了 

arrayMethods ， arrayMethods 的 定义 在 src/core/observer/array.js 中 : 


lmpoOnE OUeNE COm Unmdexs 


const arrayProto = Array,.prototype 
export const arrayMethods = 0bject.create(arrayProto) 


const methodsToPatch = [ 

NS 

“pop ， 

ETE 

USIEEEE 

ESDULTCeS 

SO 

"reVverse'” 


7 生生 
* Intercept mutating methods and emit events 
2 


methodsToPatch.forEach(Cfunction (method) 攻 
// cache original method 
const original = arrayProto[method] 
def(arrayMethods，method，function mutator (...args) 六 
const result = original.apply(this，args) 
conSst ob = this,_ ob 
let inserted 
Switch (method) 区 
Casel push : 
Caseauunmshnaiht 
inserted = args 
break 
Case .splice': 
inserted = args.Slice(2) 
break 
} 
if (inserted) ob,.observeArray(inserted ) 
// notify change 
ob ,dep,.notify() 
return resuj]t 
了 ) 
]) 


可 以 看 到 ， arrayMethods 首先 继承 了 Array ， 然后 对 数组 中 所 有 能 变数 组 自身 的 方法 ， 如 
push、pop 等 这 些 方法 进行 重 写 。 重 写 后 的 方法 会 爷 执行 它们 本 身 原 有 的 逻辑 ， 并 对 能 增加 数组 长 度 
的 3 个 方法 push、unshift、splice 方法 做 了 判断 ， 获 取 到 插 人 的 值 ， 然 后 把 新 添加 的 值 变 成 一 个 
响应 式 对 象 ， 并 且 再 调用 ob .dep.notify() 手动 触发 依赖 通知 ， 这 就 很 好 地 解释 了 之 前 的 示例 中 调 
用 vm.items.splice(newLength) 方法 可 以 检测 到 变化 。 


总 疆 


4 了 呈 


通过 这 一 节 的 分 析 ， 我 们 对 响应 式 对 象 又 有 了 更 全 面 的 认识 ， 如 果 在 实际 工作 中 遇 到 了 这 些 特殊 情 

况 ， 我 们 就 可 以 知道 如 何 把 它们 也 变 成 响应 式 的 对 象 。 其 实 对 于 对 象 属性 的 删除 也 会 用 同样 的 问题 ， 

Vue 同样 提供 了 vue.del 的 全 局 API， 它 的 实现 和 vue.set 大 相 径 庭 ， 甚 至 还 要 更 简单 一 些 ， 这 
里 我 就 不 去 分 析 了 ， 感 兴趣 的 同学 可 以 自行 去 了 解 。 


计算 属性 VS 侦 听 属性 


Vue 的 组 件 对 象 文 持 了 计算 属性 computed 和 侦 听 属性 watch 2 个 选项 ， 很 多 同学 不 了 解 什么 时 候 
该 用 computed 什么 时 候 该 用 _ watch 。 先 不 回答 这 个 问题 ， 我 们 接 下 来 从 源码 实现 的 角度 来 分 析 它 
们 两 者 有 什么 区 别 。 


computed 


计算 属性 的 初始 化 是 发 生 在 Vue 实例 初始 化 阶段 的 initstate 画 数 中 ， 执 行 了 if 
(opts.computed) initComputed(vm，opts.computed) ， initCcomputed 的 定义 在 


src/core/instance/state.js 中 : 


const computedwatcheroptions = { computed: true } 
function InitCcomputed (vm: Component，computed: Object) 攻 
// $flow-disable-】ine 
const watchers = vm,_computedwatchers = 0bject.create(null) 
// computed properties are just getters during SSR 
Const 1ISSSR = 1IsServerRendering() 


for (const key in computed) 六 
const UserDef = computed[key] 


const getter = typeof userDef === 'function' ? UserDef : UserDef ,get 
If (process,.env.NODE_ENV !== 'production”&& getter == null) 攻 
warn( 


GetEEnEnswmrssrnogEkomcomnputcedgprnopemey 和 中 作 Key 
Vm 


If (!iSsSSR) 六 
// create internal watcher for the computed property， 
watchers[key] = new Watcher( 
Vmy 
getter || noop， 
noop， 
computedwatcheroptions 


// component -defined computed properties are already defined on the 
// component prototype， We only need to define computed properties defined 
X/A at lnstantaatIon here' 
If (!(key in vm)) 并 

defineCcomputed(vm，key，UserDef ) 
} else if (process.env,NODE_ENV !== "production') 

if (key in vm.$data) 攻 

warn( The computed property "${fkey}"” is already defined in data,， ，Vvm) 


} else if (vm.$options ,props && key in vm.$options ,props) 攻 
warn( The computed property "${fkey}"” is already defined as a prop， ，vVvm) 


本 数 首先 创建 为 一 个 至 对 象 ， 接 着 对 computed 对 象 做 逼 历 ， 拿 到 计算 属 

性 的 每 一 个 userDef ， 然 后 党 试 获取 这 个 userDef 对 应 的 getter 画 数 ， 拿 不 到 则 在 开发 环境 下 

报警 告 。 接 下 来 为 每 一 个 getter 创建 一 个 watcher ， 这 个 _ watcher 和 泻 染 watcher 有 一 点 很 

大 的 不 同 ， 它 是 一 个 computed watcher ， 因 为 const computedwatcheroptions = { computed: 

true } 。 computed watcher 和 普通 watcher 的 差别 我 稍 后 会 介绍 。 最 后 对 判断 如 果 key 不 是 

vm 的 属性 ， 则 调用 definecomputed(vm，key，userDef) ， 否 则 判断 计算 属性 对 于 的 key 是 否 
经 被 data 或 者 prop 所 占用 ， 如 果 是 的 话 则 在 开发 环境 报 相应 的 警告 。 


那么 接 下 来 需要 重点 关注 definecomputed 的 实现 : 


export function defineCcomputed (人 
ES ERAYS 
Key string 
UserDef :opJectaluEunctaon 


JE 
const shouldcache = !isServerRendering() 
If (typeof userDef === 'function' ) 攻 
sharedPropertyDefinition.get = Shouldcache 
? createCcomputedGetter(key ) 
: USserDef 
sharedPropertyDefinition.set = noop 
elLse 王 人 
sharedPropertyDefinition.get = UserDef ,get 
? ShouldCcache && UserDef .cache !== false 
? createCcomputedGetter(key ) 
USserDef .get 
: noop 
sharedPropertyDefinition.set = UserDef ,Set 
? UserDef ,Set 
: noop 
】} 
If (process,env.NODE_ENV !== "production”&& 
sharedPropertyDefinition.set === noop) { 
sharedPropertyDefinition.set = function () 六 
warn( 
“Computed property "${tkey}"” was assigned to but it has no setter. ， 
thIs 
) 
】} 
】} 


0bject .defineProperty(target，key，sharedPropertyDefinition) 


这 段 逻 辑 很 简单 ， 其实 就 是 利用 object.defineProperty 给 计算 属性 对 应 的 key 值 添 加 getter 和 
setter， setter 通常 是 计算 属性 是 一 个 对 象 ， 并 且 拥 有 set 方法 的 时 候 寺 有， 否则 是 一 个 空 本 数 。 在 平 
时 的 开发 场景 中 ， 计 算 属 性 有 setter 的 情况 比较 少 ， 我 们 重点 关注 一 下 getter 部 分 ， 缓 存 的 配置 也 先 忽 
略 ， 最 终 getter 对 应 的 是 createcomputedGetter(key) 的 返回 值 ， 来 看 一 下 它 的 定义 : 


function createCcomputedGetter (key) 
FetunEfunctaonEcomputeueetEer (站 三 
const watcher = this,_ computedwatchers && this._computedwatchers[key] 
If (watcher) 1{ 
watcher .depend ( ) 
return watcher .evaluate() 


createComputedGetter 返回 一 个 函数 computedGetter ， 它 就 是 计算 属性 对 应 的 getter。 


整个 计算 属性 的 初始 化 过 程 到 此 结束 ， 我 们 知道 计算 属性 是 一 个 computed watcher ， 它 和 普通 的 
watcher 有 什么 区 别 呢 ， 为 了 更 加 直观 ， 接 下 来 来 我 们 来 通过 一 个 例子 来 分 析 computed watcher 
的 实现 。 


var vm = new Vue({ 
data: 于 
firstName: "Foo '， 
JastName: Bar ， 


外 
Computed : 荆 
fu]l1IName: function () 并 
return this,firstName + ' ' + this, LastName 
】} 
} 
】) 


当初 始 化 这 个 computed watcher 实例 的 时 候 ， 构 造 丁 数 部 分 逻辑 稍 有 不 同 : 


consnucco( 
vm: Component， 
exporFn: String | Function， 
cb: Function， 
options?: ?0bject， 
IsSRenderwatcher?: boolean 
) 荆 
7 
If (this.computed) 攻 
this.value = undefined 
this.dep = new Dep() 
else { 
this,Value = this.get() 


可 以 发 现 computed watcher 会 并 不 会 立刻 求 值 ， 同 时 持 有 一 个 dep 实例 。 


然后 当 我 们 的 render 画 数 执行 访问 到 this,.fullName 的 时 候 ， 就 蚀 发 了 计算 属性 的 getter ， 
它 会 拿 到 计算 属性 对 应 的 watcher ， 然 后 执行 watcher.depend() ， 来 看 一 下 它 的 定义 : 


[六 
* Depend on this watcher，only for computed property watchers . 
2 

depend () 攻 
If (this.dep && Dep.target) 攻 

this,dep.depend() 
} 
】} 


注意 ， 这 时 候 的 Dep.target 是 演 染 watcher ， 所 以 this.dep.depend() 相当 于 演 染 watcher 
订阅 了 这 个 computed watcher 的 变化 。 


然后 再 执行 watcher.evaluate() 去 求 值 ， 来 看 一 下 它 的 定义 : 


A/ 交 
> EValuate and return the value of the watcher : 
* This only gets called for computed property watchers ， 
2 
evaluate () { 
if (this.dirty) 攻 
this,Value = this.get() 
this.dirty = false 
】} 


return this.vValue 


evaluate 的 逻辑 非常 简单 ， 判 断 this,.dirty ， 如 果 为 true 则 通过 this,.get() 求 值 ， 然 后 
把 this.dirty 设置 为 false。 在 求 值 过 程 中 ， 会 执行 value = this.getter.call(vm，vm) ， 这 实 
际 上 就 是 执行 了 计算 属性 定义 的 getter 画 数 ， 在 我 们 这 个 例子 就 是 执行 了 _ return 


thlis.firstName + '” ' + thlis.1astName 。 


这 里 需要 特别 注意 的 是 ， 由 于 this.firstName 和 this.lastName 都 是 响应 式 对 象 ， 这 里 会 触发 
它们 的 getter， 根 据 我 们 之 前 的 分 析 ， 它 们 会 把 自身 持 有 的 dep 添加 到 当前 正在 计算 的 watcher 
中 ， 这 个 时 候 Dep,target 就 是 这 个 computed watcher 。 

最 后 通过 return this.value 拿 到 计算 属性 对 应 的 值 。 我 们 知道 了 计算 属性 的 求 值 过 程 ， 那 么 接 下 
来 看 一 下 它 依赖 的 数据 变化 后 的 逻辑 。 

一 旦 我 们 对 计算 属性 依赖 的 数据 做 修改 ， 则 会 触发 setter 过 程 ， 通 知 所 有 订阅 它 变化 的 watcher 更 
新 ， 执 行 watcher.update() 方法 : 


计算 属性 VS 侦 听 属性 


/* 1Istanbul 1Ignore else */ 
If (this.computed) 
// A computed property watcher has two modes: lazy and activated 
// It initializes as lazy by default，and only becomes activated when 
// it is depended on by at least one Subscriber，Wwhich Is typical1ly 
// another computed property or a _ component 'Ss render function. 
If (this.dep.subs,Jlength === 0) { 
// In lazy mode，we don't want to perform computations untiIil necessary， 
// So we Simply mark the watcher as dirty. The actual computation 1S 
// performed just-in-time in this,evaluate() when the computed property 
SEEaccessede 
this.dirty = true 
Telseet 
// In activated mode，we want to proactively perform the computation 
// but only notify our Subscribers when the value has indeed changed . 
this.getAndInvoke(() => 并 
this,dep,.notify() 
天 
} 
hh else if (thissync){ 
this.run() 
else 1{ 
dueuewWatcher(this ) 


那么 对 于 计算 属性 这 样 的 _ computed watcher ， 它 实际 上 是 有 2 种 模式 ，lazy 和 active。 如 果 
this.dep.subs.length === 0 成 立 ， 则 说 明 没 有 人 去 订阅 这 个 computed watcher 的 变化 ， 仅 仅 
把 this.dirty = true ， 只 有 当下 次 再 访问 这 个 计算 属性 的 时 候 才 会 重新 求 值 。 在 我 们 的 场景 下 ， 
泻 染 watcher 订阅 了 这 个 computed watcher 的 变化 ， 那 么 它 会 执行 : 


this.getAndInvoke(() => { 
this.dep.notify() 
了] 了) 


getAndInvoke (cb: FunctIon) { 

const Value = this,get() 

工作 于 人 
Value !== thlis.value | 
// Deep watchers and watchers on Object/Arrays Shou1ld fire even 
// when the value 1s the Same，because the value may 
看 havegmueated 
Isobject(value) || 
this.deep 

) 量 人 
// set new Value 
const 0JdvValue = thlis.Vvalue 
this.value = Value 
this,dirty = false 
If (thaisauser) Et 


[本 的 
cb.call(this,.vm，Vvalue，o01dvalue) 
Tcatccnm(eDL 
handleError(e，this,.vm， callback for watcher "${this.expression}”) 


Telset 
cb.call(this.vm，Vvalue，o01dvalue) 


j 
】} 


getAndInvoke 画 数 会 重新 计算 ， 然 后 对 比 新 旧 值 ， 如 果 变 化 了 则 执行 回调 函数 ， 那 么 这 里 这 个 回调 
本 数 是 this.dep,notify() ， 在 我 们 这 个 场景 下 就 是 触发 了 泻 染 watcher 重新 演 染 。 
通过 以 上 的 分 析 ， 我 们 知道 计算 属性 本 质 上 就 是 一 个 computed watcher ， 也 了 解 了 它 的 创建 过 程 和 
被 访问 鲁 发 getter 以 及 依赖 更 新 的 过 程 ， 其 实 这 是 最 新 的 计算 属性 的 实现 ， 之 所 以 这 么 设计 是 因为 Vue 
想 确保 不 仅仅 是 计算 属性 依赖 的 值 发 生变 化 ， 而 是 当 计算 属性 最 终 计算 的 值 发 生变 花 才 会 触发 演 染 
watcher 重新 演 染 ， 本 质 上 是 一 种 优化 。 


接 下 来 我 们 来 分 析 一 下 侦 听 属性 watch 是 怎么 实现 的 。 


watch 


侦 听 属性 的 初始 化 也 是 发 生 在 Vue 的 实例 初始 化 阶段 的 initstate 画 数 中 ， 在 computed 初始 化 
之 后 ， 执 行 了 : 


If (opts.watch && opts.watch !== nativewatch) 
Initwatch(vm，opts.watch) 


由 


来 看 一 下 initwatch 的 实现 ， 它 的 定义 在 src/core/instance/state.js 中 : 


function initwatch (vm: Component，watch: Object) { 
for (const key in watch) 蕊 

const handler = watch[key] 

If (Array.IsArray(handJer)) 荆 
for (let IIL = 0;) 工 < handler,Jlength; I++) 六 

createwatcher(vm，key，handler[i]) 

else 二 上 

createwWatcher(vm，key，handler ) 


这 里 就 是 对 _ watch 对 象 做 逼 历 ， 拿 到 每 一 个 _handler ， 因 为 Vue 是 支持 watch 的 同一 个 key 
对 应 多 个 handler ， 所 以 如 果 handler 是 一 个 数组 ， 则 逗 历 这 个 数组 ， 调 用 createwatcher 方 
法 ， 否 则 直接 调用 _ createwatcher 


function createwatcher (人 
Vvm: Component， 
exporFn: string | Function， 
handler: any， 
options2?2: 0bject 
JE 
If (IsPlainobject(handler)) 革 
options = handJler 
handler = handler.hand]ler 


】} 
If (typeof handler === "string' ) 六 
handler = vm[handler] 
】} 
return vm.$watch(exporFn，handJler，options ) 


这 里 的 逻辑 也 很 简单 ， 首 先 对 hanlder 的 类 型 做 判断 ， 拿 到 它 最 终 的 回调 范 数 ， 最 后 调用 
vm,$watch(keyorFn，handler，options) 画 数 ， $watch 是 Vue 原型 上 的 方法 ， 它 是 在 执行 
stateMixin 的 时 候 定义 的 : 


Vue,.prototype.$watch = function (人 
exporFn: string | Function， 
Cany 
options?: 0bject 
站 恒 EUmcEDiOm 汪 人 
const vm: Component = this 
if (IsPlLainobject(cb)) { 
return createwWatcher(vm，exporFn，cb，options ) 
} 
options = options || 全 
options.User = true 
const watcher = new Watcher(vm，exporFn，cb，options ) 
If (options.immediate) 攻 
cb.call(vm，watcher .Value) 
】} 
return function UnwatchFn () 攻 
watcher ,teardown'( ) 


也 就 是 说 ， 侦 听 属 性 watch 最 终 会 调用 $watch 方法 ， 这 个 方法 首先 判断 cb 如 果 是 一 个 对 象 ， 
则 调用 _ createwatcher 方法， 这 是 因为 $watch 方法 是 用 户 可 以 直接 调用 的 ， 它 可 以 传递 一 个 对 
象 ， 也 可 以 传递 酚 数 。 接 着 执行 const watcher = new Watcher(vm，exporFn，cb，options) 实例 
化 了 一 个 watcher ， 这 里 需要 注意 一 点 这 是 一 个 user watcher ， 因 为 options.user = true 。 


通过 实例 化 _ watcher 的 方式 ， 一 有 旦 我 们 watch 的 数据 发 送 变化 ， 它 最 终 会 执行 watcher 的 
run 方法 ， 执 行 回调 范 数 cb ， 并 且 如 果 我 们 设置 了 :immediate 为 true， 则 直接 会 执行 回调 酚 数 
cb 。 最 后 返回 了 一 个 unwatchFn 方法 ， 它 会 调用 teardown 方法 去 移 除 这 个 watcher 。 


所 以 本 质 上 侦 听 属性 也 是 基于 watcher 实现 的 ， 它 是 一 个 user watcher 。 其 实 watcher 支持 了 
不 同 的 类 型 ， 下 面 我 们 梳理 一 下 它 有 哪些 类 型 以 及 它们 的 作用 。 


Watcher options 


watcher 的 构造 酚 数 对 options 做 的 了 处 理 ， 代 码 如 下 : 


If (options) 革 


this,deep = !!options.deep 
this,user = !!options.user 
this,computed = !!options.computed 
this,sync = !!options.Sync 
和 
hielse tf{ 
this,deep = this.user = this.computed = this,sync = Talse 


所 以 _watcher 总 共有 4 种 类 型 ， 我 们 来 一 一 分 析 它 们 ， 看 看 不 同 的 类 型 执行 的 逻辑 有 哪些 差别 。 


deep watcher 


通常 ， 如 果 我 们 想 对 一 下 对 象 做 深度 观测 的 时 候 ， 需 要 设置 这 个 属性 为 rue， 考 虑 到 这 种 情况 : 


Var vm = new Vue({ 
data() 区 


】， 
Watch: 区 
al 工 
handler(newVvVal) 攻 
console.1og(newVval) 


这 个 时 候 是 不 会 log 任何 数据 的 ， 因 为 我 们 是 watch 了 _a 对 象 ， 只 触发 了 a 的 getter， 并 没有 触发 
a.b 的 getter， 所 以 并 没有 订阅 它 的 变化 ， 导 致 我 们 对 vm.a.b = 2 赋值 的 时 候 ， 虽 然 触 发 了 
setter， 但 没有 可 通知 的 对 象 ， 所 以 也 并 不 会 触发 watch 的 回调 酚 数 了 。 


而 我 们 只 需要 对 代码 做 稍稍 修改 ， 就 可 以 观测 到 这 个 变化 了 


Watch: 攻 
al 工 
deeputruey 
handler(newVvVal) 攻 
console.1og(newVval) 


这 样 就 创建 了 一 个 deep watcher 了 ,在 watcher 执行 get 求 值 的 过 程 中 有 一 段 逻 辑 : 


get() 荆 
Jet Value = this.getter.call(vm，vm) 
7 
if (this.deep) 六 
traverse(value ) 


在 对 watch 的 表达 式 或 者 本 数 求 值 后 ， 会 调用 traverse 画 数 ， 它 的 定义 在 


Src/Vcore/observerVvtraverse .js 中 : 


mpomte ESetEasESsetasooect iron yndexa 
Import type { SimpJleSet } from "../Vutil/index 
Import VNode from ".,,/Vvdom/vnode' 


const SeenoObjects = new Set() 


[ 
* Recursively traverse an object to evoke al1l converted 
* getters，So that every nested property inside the object 
* Is collected as a "deep"” dependency， 
0 

export functaionitnraverse (val any) 攻 
_traverse(val，seenobjects ) 
Seenobjects.clear() 


function traverse (Val: any，sSseen: SimpleSet) { 

Jet 工 ， keys 

const IsSA = Array,IsArray(Vval) 

If ((!iSA && !isobject(val)) || 0bject,isFrozen(val) || val instanceof VNode) 攻 
return 

】} 

if (val,_ ob ) 攻 
const depId = val. ob_ ,dep.id 
If (Seen.has(depId)) 攻 


ieEUn 

】} 

Seen.add(depId ) 
】} 
if (IsSA) 二 

工 = val.length 

while (I--) _traverse(val[I]，seen) 
Telsenf 

keys = 0bject,keys(val) 

工 = keys.Jength 

while (I--) _traverse(val[keys[I]]，seen) 


traverse 的 逻辑 也 很 简单 ， 它 实际 上 就 是 对 一 个 对 象 做 深层 递归 通 历 ， 因 为 逼 历 过 程 中 就 是 对 一 个 
子 对 象 的 访问 ， 会 触发 它们 的 getter 过 程 ， 这 样 就 可 以 收集 到 依赖 ， 也 就 是 订阅 它们 变化 的 

watcher ， 这 个 函数 实现 还 有 一 个 小 的 优化 ， 逼 历 过 程 中 会 把 子 响 应 式 对 象 通过 它们 的 dep id 记 
录 到 seenobjects ， 避 免 以 后 重复 访问 。 

那么 在 执行 了 traverse 后 ， 我 们 再 对 watch 的 对 象 内 部 任何 一 个 值 做 修改 ， 也 会 调用 watcher 的 
回调 酚 数 了 。 

对 deep watcher 的 理解 非常 重要 ， 今 后 工作 中 如 果 大 家 观测 了 一 个 复杂 对 象 ， 并 且 会 改变 对 象 内 部 


深层 某 个 值 的 时 候 也 厕 望 触发 回调 ， 一 定 要 设置 deep 为 true， 但 是 因为 设置 了 deep 后 会 执行 
traverse 画 数 ， 会 有 一 定 的 性 能 开销 ， 所 以 一 定 要 根据 应 用 场景 权衡 是 否 要 开局 这 个 配置 。 


User watcher 


前 面 我 们 分 析 过 ， 通 过 vm.$watch 创建 的 watcher 是 一 个 user watcher ， 其 实 它 的 功能 很 简 
单 ， 在 对 watcher 求 值 以 及 在 执行 回调 本 数 的 时 候 ， 会 处 理 一 下 错误 ， 如 下 : 


get() 荆 
工 由 帮 GEnTSsUSserey) 卫 上 
handleError(e，Vvm/ getter for watcher "${fthis.expression}”) 


Tielsee 
throw e 
} 
}， 
getAndInvoke() 攻 
LA 
If (thissuser) 
上 ES 
this.cb,call(this.vm，Vvalue，o01ldVvalue) 
ECaccn(ey) 下 必 
handleError(e，this.vm， "callback for watcher "${this.expression}y”) 
】} 
JelseE 上 


this,cb,.call(this.vm，Vvalue，o0o1ldvalue) 


handleError 在 Vue 中 是 一 个 错误 捕获 并 且 暴 露 给 用 户 的 一 个 利器 。 


computed watcher 


computed watcher 几乎 就 是 为 计算 属性 量 身 定制 的 ， 我 们 刚 示 已 经 对 它 做 了 详细 的 分 析 ， 这 里 不 再 
效 述 了 。 


Sync watcher 


在 我 们 之 前 对 setter 的 分 析 过 程 知道 ， 当 响应 式 数据 发 送 变化 后 ， 触 发 了 _ watcher.update() ， 
只 是 把 这 个 watcher 推送 到 一 个 队列 中 ， 在 nextTick 后 示 会 真正 执行 watcher 的 回调 函数 。 
而 一 旦 我 们 设置 了 Sync ， 就 可 以 在 当前 Tick 中 同步 执行 watcher 的 回调 酚 数 。 


Update () 革 
If (this.computed) 芒 
7 全 
Telsefthnasessync{ 
this.run() 
TelseEf 
dueuewatcher(this ) 
】} 
】} 


只 有 当 我 们 需要 watch 的 值 的 变化 到 执行 watcher 的 回调 本 数 是 一 个 同步 过 程 的 时 候 才 会 去 设置 该 
属性 为 true。 


总 结 


通过 这 一 小 节 的 分 析 我 们 对 计算 属性 和 侦 听 属性 的 实现 有 了 深入 的 了 解 ， 计 算 属 性 本 质 上 是 
computed watcher ， 而 侦 听 属性 本 质 上 是 user watcher 。 就 应 用 场景 而 言 ， 计 算 属 性 适合 用 在 模 
板 泻 染 中 ， 某 个 值 是 依赖 了 其 它 的 响应 式 对 象 甚 至 是 计算 属性 计算 而 来 ; 而 侦 听 属性 适用 于 观测 某 个 
值 的 变化 去 完成 一 段 复杂 的 业务 逻辑 。 


同时 我 们 又 了 解 了 _watcher 的 4 个 options ， 通 党 我 们 会 在 创建 user watcher 的 时 候 配 置 
deep 和 sync ， 可 以 根据 不 同 的 场景 做 相应 的 配置 。 


组 件 更 新 


在 组 件 化 章节 ， 我 们 介绍 了 Vue 的 组 件 化 实现 过 程 ， 不 过 我 们 只 讲 了 Vue 组 件 的 创建 过 程 ， 并 没有 涉 
及 到 组 件数 据 发 生变 化 ， 更 新 组 件 的 过 程 。 而 通过 我 们 这 一 章 对 数据 响应 式 原理 的 分 析 ， 了 解 到 当 数 
据 发 生变 化 的 时 候 ， 会 触发 演 染 watcher 的 回调 本 数 ， 进 而 执行 组 件 的 更 新 过 程 ， 接 下 来 我 们 来 详 
细 分 析 这 一 过 程 。 


updateComponent = () => { 
vm,_update(vm.,_render()，hydrating ) 


】} 
new Watcher(vm，updateCcomponent，noop， 攻 
before () 
If (vm._ isMounted) 区 
CallIHook(vm， 'beforeUpdate ' ) 


ETUCE LSRenderwWatchner 


组 件 的 更 新 还 是 调用 了 vm._update 方法 ， 我 们 再 回顾 一 下 这 个 方法 ， 它 的 定义 在 


src/core/instance/lLifecycle.js 中 : 


Vue.prototype,_update = function (vnode: VNode，hydrating?: boolean) 攻 
const Vvm: Component = this 
AL 
const prevvnode = vm,_vnode 
If (!prevVnode) 攻 
neuamieneenrs 

vm,$el = vm, patch_ (vvm.$el，vnode，hydrating，Talse /” removeonly ”7/) 
Telse 

// updates 

vm,$el = vm, patch_ (prevvnode，vnode) 


组 件 更 新 的 过 程 ， 会 执行 vm,.$el = vm, patch_ (prevvnode，vnode) ， 它 仍然 会 调用 patch 画 
数 ， 在 src/core/vdom/patch.,js 中 定义 : 


return function patch (ol1dvnode，vnode，hydrating，removeonly) 并 
If (isUundef(vnode)) 攻 
If (isDef(o1ldvnode)) invokeDestroyHook(oldvnode ) 
euran 


Jet IsInitialPatch = false 


const insertedvnodeQueue = [] 


if (IsUndef(oldvnode)) 
// empty mount (1Likely as component )，create new root element 
ISTInitialPatch = true 
createElm(vnode，insertedvnodeQueue ) 
helse { 
const ISRealEJLement = IsDef(oldvnode.nodeType) 
If (!iSRealEJlement && samevnode(o1ldvnode，vnode)) 攻 
// patch existing root node 
patchvnode(o1ldvnode，vnode，insertedvnodeQueue，removeonly) 
else 1{ 
If (IsSRealEJement ) 革 
光 


// rep]lacing existing element 
const oldElm = 01dvnode.elm 
const parentEJlm = nodeops.parentNode(oldEJlm) 


// create new node 
createEJm( 
Vvnode， 
InsertedVvnodeQueue， 
// extremely rare edge case: do not insert If 01d element is in a 
// leaving transition. only happens when combining transition + 
// keep-alive + HOCS， (#4590 ) 
oldEJm._ leavecb ? nul1 : parentEJLm， 
nodeops .nextSibJling(oldEJm) 


Xupdate uparent placeholder node element recursIVvely 
If (isDef(vnode.parent)) 攻 
let ancestor = vnode.parent 
const patchable = isPatchable(vnode) 
while (ancestor ) 攻 
for (let = 0; 工 < cbs.destroy,length; ++i) { 
cbs ,destroy[I](ancestor) 
} 
ancestor .elm = vnode.elm 
If (patchable) 革 
for (let = 0;) 工 < cbs,create,Jength;y ++I) 荆 
cbs.create[I](emptyNode，ancestor ) 
} 
人 本 65HS 
// invoke insert hooks that may have been merged by create hooks ， 
// e.g. for directives that uses the "inserted”"” hook . 
const jinsert = ancestor .data.hook.insert 
If (insert.merged) 于 
// start at index 1 to avoid re-invoking component mounted hook 
人 Or (Le 1LD ETIWE<RnsertsfnssLengthm) + 下 上 
insert .fns[I]() 


】} 

Jelse 1{ 
registerRef(ancestor ) 

】} 

ancestor = ancestor.parent 


// destroy olLd node 

If (isDef(parentEJlm)) { 
removevnodes(parentEJm， [oldvnode]，9，0) 

} else if (IsDef(oldvnode.tag)) { 
invokeDestroyHook(oldvnode ) 


InvokeInsertHook(vnode，insertedvnodeQueue，isInitialPatch ) 
return vnode .elm 


这 里 执行 patch 的 逻辑 和 首次 渲染 是 不 一 样 的 ， 因 为 oldvnode 不 为 空 ， 并 且 它 和 vnode 都 是 
VNode 类 型 ， 接 下 来 会 通过 samevNode(oldvnode，vnode) 判断 它们 是 否 是 相同 的 VNode 来 决定 走 
不 同 的 更 新 逻辑 : 


function Samevnode (a，b) 攻 
return (人 
a.key === b,.key && (人 

人 
atag === b.tag && 
a.ISComment === b.ISComment && 
IsDef(a.data) === IsDef(b,.data) && 
SameInputType(a，b) 

) 国 川 荐 人 
ISTrue(a.iIisAsyncPJlacehoJlder ) && 
a.asyncFactory === b.asyncFactory && 
IsUndef(b.asyncFactory,error ) 


SameVnode 的 逻辑 非常 简单 ， 如 果 两 个 vnode 的 key 不 相等 ， 则 是 不 同 的 ; 否则 继续 判断 对 于 
同步 组 件 ， 则 判 上 晰 iscomment 、 data 、 Input 类 型 等 是 否 相同 ， 对 于 异步 组 件 ， 则 判断 
aSsyncFactory 是 否 相同 。 


所 以 根据 新 旧 vnode 是 否 为 samevnode ， 会 走 到 不 同 的 更 新 逻辑 ， 我 们 先 来 说 一 下 不 同 的 情况 。 


新 旧 节 点 不 同 


如 果 新 日 vnode 不 同 ， 那 么 更 新 的 逻辑 非常 简单 ， 它 本 质 上 是 要 替换 已 存在 的 节点 ， 大 致 分 为 3 步 
。 创建 新 节点 


const oldEJlm = 01dvnode .elm 
const parentEJm = nodeops.parentNode(o1LldEJm) 
// create new node 
createEJlm( 
VvVnode， 
insertedVvnodeQueue， 
// extremely rare edge case: do not insert if old element is in a 
// leaving transition，oOnly happens when combjining transition + 
// keep-alive + HOCS，(#4590 ) 
0JLdEJm,_ Jeavecb ? nul1 : parentEJLm， 
nodeops .nextSibling(oldEJm) 


以 当前 旧 节 点 为 参考 节点 ， 创 建新 的 节点 ， 并 插 人 到 DOM 中 ， createElm 的 逻辑 我 们 之 前 分 析 过 。 
。 更 新 父 的 占 位 符 节 点 


/updateyparentciplacenoldqerinouerelementa recursIVely 
If (IsDef(vnode,parent )) 
let ancestor = vnode.parent 
const patchable = IsPatchable(vnode ) 
while (ancestor ) 于 
for (eta = Ona< cbssdestroy .lengthn ++ra) 
cbs.destroy[I](ancestor ) 
】} 
ancestor.elm = vnode,elm 
If (patchabJle) 区 
for (let IL= 0;) 工 < cbs.create. length; ++I) 攻 
cbs .create[Ii](emptyNode，ancestor ) 
} 
// #6513 
// invoke insert hooks that may have been merged by create hooks ， 
// e.g,. for directives that uses the "inserted” hook 
const jinsert = ancestor.data.hook.insert 
If (insert.merged) 革 
// start at index 1 to avolid re-invoking component mounted hook 
Tora let = LE< nsenrtaftnssLengthn) t+) 
insert .fns[I]() 


Telse 


registerRef(ancestor ) 


ancestor = ancestor.parent 


我 们 只 关注 主要 逻辑 即 可 ， 找 到 当前 vnode 的 父 的 占 位 符 节 点 ， 先 执行 各 个 module 的 destroy 
的 钧 子 范 数 ， 如 果 当 前 占 位 符 是 一 个 可 挂 载 的 节点 ， 则 执行 module 的 create 钧 子 函 数 。 对 于 这 
些 钧 子 函 数 的 作用 ， 在 之 后 的 章节 会 详细 介绍 。 


。 删除 旧 贡 点 


// destroy ol1d node 

If (IsDef(parentEJlm) ) 
removevnodes(parentElm， [oldvnode]，90，0) 

} else if (isDef(o1ldvnode.tag)) 荆 
InvokeDestroyHook(oldvnode ) 


把 oldvnode 从 当前 DOM 树 中 删除 ， 如 果 父 节点 存在 ， 则 执行 removevnodes 方法 : 


function removevnodes (parentEJlm，Vvnodes，SstartIdx，endIdx) 攻 
for (; StartIdx <= endIdx; ++StartIdx) 攻 
const ch = vnodes[startIdx] 
if (IsDef(ch)) 1{ 
If (isDef(ch.tag)) 革 
removeAndInvokeRemoveHook(cnh ) 
invokeDestroyHook(ch ) 
JEelse(O Textnoue 
removeNode(ch.elm) 


function removeAndInvokeRemoveHook (vnode，rm) 蔷 
If (isDef(rm) || IsDef(vnode.data)) { 

二 et 

const listeners = cbs.remove,.Jlength + 工 

If (IsDef(rm)) 攻 
// we have a recursively passed down rm callback 
/IncrneaseatneastenersacoOunt 
rm.,1iIsteners += Listeners 

elsest 
// directly removing 
rm = createRmCcb(vnode.elm，1]1isteners ) 

】} 

// recursively invoke hooks on child component root node 

If (isDef(I = vnode.componentInstance) && isDef(I = 工 ._vnode) && IsDef(I.data) ) 


removeAndInvokeRemoveHook(I，rm) 


for (LE=0; 工 < cbs.remove. length; ++i) 
cbs.remove[I](vnode，rm) 

】} 

If (isDef(I = vnode.data.hook) && isDef(I = I.remove)) 革 
I(vnode， rm) 

elses 
rm( ) 

】} 

else lt 
removeNode(vnode.elm) 


function invokeDestroyHook (vnode) 1 
et 
const data = vnode .data 
If (IsDef(data)) { 
If (isDef(I = data.hook) && isDef(1I = I.destroy)) I(vnode ) 
for (TIL =0; 工 < cbs.destroy.Jlength; ++i) cbs.destroy[I](vnode) 


】} 
If (isDef(I = vnode.children)) 攻 
for (j] = 90; j < vnode.children.length; ++]j) { 
invokeDestroyHook(vnode,.children[j]) 


删除 节点 逻辑 很 简单 ， 就 是 逼 历 待 删除 的 vnodes 做 删除 ， 其 中 removeAndInvokeRemoveHook 的 

作用 是 从 DOM 中 移 除 节点 并 执行 module 的 remove 钩子 函数 ， 并 对 它 的 子 节点 递 娄 调用 
removeAndInvokeRemoveHook 柄 数 ; invokeDpestroyHook 是 执行 module 的 destory 钩子 范 

数 以 及 vnode 的 destory 钩子 函数 ， 并 对 它 的 子 vnode 递 娄 调用 invokeDestroyHook 酚 

数 ; removeNode 就 是 调用 平台 的 DOM API 去 把 真正 的 DOM 节点 移 除 。 


在 之 前 介绍 组 件 生命 周期 的 时 候 提 到 beforeDestroy & destroyed 这 两 个 生命 周期 钩 子 丁 数 ， 它们 
就 是 在 执行 invokepestroyHook 过 程 中 ， 执 行 了 _vnode 的 destory 钩子 函数 ， 它 的 定义 在 


src/core/vdom/create-component .js 中 : 


const componentVNodeHooks = 二 
destroy (vnode: MountedCcomponentVNode ) 六 
const { componentInstance } = vnode 
If (!componentInstance.,_ isDestroyed) 并 
If (!vnode.data.keepAlive) 攻 
componentInstance.$destroy() 
小 二 eiLsee 人 
deactivatechildCcomponent(componentInstance，true 人/ direct */) 


当 组 件 并 不 是 keepAlive 的 时 候 ， 会 执行 componentInstance.$destroy() 方法 ， 然 后 就 会 执行 
beforeDestroy & destroyed 两 个 钧 子 范 数 。 


新 旧 节 点 相同 


对 于 新 旧 节 点 不 同 的 情况 ， 这 种 创建 新 节点 -> 更 新 占 位 符 节 点 -> 删除 卓 节 点 的 逻辑 是 很 容易 理解 的 。 
还 有 一 种 组 件 vnode 的 更 新 情况 是 新 旧 节 点 相同 ， 它 会 调用 patchvNode 方法 ， 它 的 定义 在 
src/core/vdom/patch.js 中 : 


function patchvnode (ol1dvnode，vnode，jinsertedvnodeQueue，removeon1ly) 攻 
If (0o1dvnode === Vvnode) 蒜 
return 


const elm = vnode.elm = 01dvnode.elm 


If (isTrue(01dvnode.IsAsyncPJlaceholder)) 
If (isDef(vnode.asyncFactory.resolved)) { 
hydrate(o1Ldvnode.elm，vnode，insertedvnodeQueue ) 
} else 攻 
vnode,.IsAsyncPJlaceholder = true 


return 


允 量 GeUsewelemenmceionstatIctreess 
// note we only do this if the vnode is cloned - 
XRD Enhenewnodesnotclonedat meansitheurendeifhunctIomsuhavebeen 
// reset by the hot-reload-api and we need to do a proper re-render ， 
If (isTrue(vnode.isStatIic) && 
ISTrue(oldvnode,isStatic) && 


Vvnode.key === 01dvnode.key && 
(IsTrue(vnode.isCloned) || isTrue(vnode.iIsonce) ) 

) 荆 
Vvnode.componentInstance = 01dvnode.componentInstance 
return 

】} 

下 Ge 


const data = vnode .data 
If (isDef(data) && isDef(I = data,.hook) && isDef(I = 工 .prepatch)) 
工 oldvnode，vnode) 


const oldch = ol1dvnode,.children 

const ch = vnode.children 

If (isDef(data) && isPatchabJle(vnode)) 攻 
for (LE =0; 工 < cbs.update.Jength; ++i) cbs,.update[i](oldvnode，vnode) 
If (isDef(I = data.hook) && isDef(I = I.update)) I(oLldvnode，vnode) 


】} 
If (isUndef(vnode.text)) 六 


if (IsDef(oldch) && isDef(ch)) { 
If (oldch !== ch) updatechildren(elm，oldch，ch，insertedvnodeQueue， removeon 
Jy) 
} else if (IsDef(ch)) ({ 
If (isDef(oldVvnode ,text)) node0ps,.setTextContent(elm， ” ) 
addvnodes(elm，nul1，ch，0，ch.length - 1，insertedvnodeQueue) 
} else if (IsDef(oldch)) 攻 
removevnodes(eJlm，oldch，0，oldch.Jlength - 工 ) 
} else if (isDef(o1ldvnode ,text)) 
nodeops,SsetTextContent(elm，"” ) 
】} 
} else if (ol1dvnode.text !== Vvnode.text) { 
nodeops.setTextContent(elm，Vvnode.text ) 
】} 
If (isDef(data)) 区 
If (isDef(I = data.hook) && isDef(I = 工 .postpatch)) I(oldvnode，vnode) 


patchvnode 的 作用 就 是 把 新 的 vnode patch 到 旧 的 vnode 上 ， 这 里 我 们 只 关注 关键 的 核心 逻 
辑 ， 我 把 它 拆 成 四 步骤 : 


。 执行 prepatch 钩子 函数 


中 ea 

const data = Vvnode.data 

If (IsDef(data) && IlIsDef(1I = data.hook) && isDef(I = .prepatch)) 并 
工 (oldvnode，vnode ) 


当 更 新 的 _vnode 是 一 个 组 件 _vnode 的 时 候 ， 会 执行 prepatch 的 方法 ， 它 的 定义 在 


src/core/vdom/ycreate-component .js 中 : 


const componentVNodeHooks = { 
prepatch (oldvnode: MountedCcomponentVNode，vnode: MountedComponentVNode ) 二 
const options = vnode.componentoptions 
const child = vnode,.componentInstance = 01dvnode.componentInstance 
updatechildCcomponent( 
child， 
options.propsData，// updated props 
options.1isteners，// up 


vnode，V// new parent vnode 


options.children // new children 


prepatch 方法 就 是 拿 到 新 的 vnode 的 组 件 配置 以 及 组 件 实 例 ， 去 执行 updatechildcomponent 
方法 ， 它 的 定义 在 src/core/instance/Lifecycle.js 中 : 


export function updatechildcomponent (人 
vm: Component， 
propspacan20bJlecy 
isteners20bpJiecE， 
parentVnode: MountedCcomponentVNode， 
renderChildren: ?Array<VNode> 


六 渤 
if (process.env.NODE_ENV !== "production' ) 攻 
IsUpdatingCchildCcomponent = true 
J 


// determine whether component has Slot children 
// we need to do this before overwriting $options, renderCchildren 


const hasCchildren = !!( 
rendercChildren || nasnewesceaenceshoks 
Vvm,$options,_renderChildren || // has old static Slots 
parentVnode .data,scopedSlots || // has new scoped Slots 
Vvm,$scopedSJlots !== emptyobject // has old scoped Slots 
) 


vm.$options._parentVvnode = parentVnode 
vm,$vnode = parentVvnode // update vm's placeholder node without re-render 


if (vm,_vnode) { V/V/ update child tree's parent 
vm,_vnode.parent = parentVnode 


) 


vm.$options._renderCchildren = renderCchildren 


// update $attrs and $]listeners hash 

// these are also reactive So they may trigger child update if the child 
// used them during render 

vm.,$attrs = parentVnode.data.attrs || emptyobject 

vm.$lLlisteners = 1Listeners || emptyobject 


// update props 
If (propsData && vm.$options.props) { 
toggleobserving(false) 
const props = vm._props 
const propkeys = vm.$options,._propkeys || D 口 
for (let L = 0;) 工 < propKeys, length; I++) 攻 
const key = propKeys[I] 
const propoptions: any = Vvm,$options,props // wtTf TfJlow? 
props[key] = validateProp(key，propoptions，propsData，vm) 
】} 
toggleobserving(true) 
// keep a copy of raw propsData 
vm,$options .propsData = propsData 


// update 1isteners 

Jisteners = Listeners || emptyoObJject 

const oldListeners = vm.$options._parentListeners 
vm.$options,._parentListeners = Listeners 
updateCcomponentListeners(vm，]1isteners，o01ldListeners ) 


// resolve Slots + force update if has chlildren 

If (hasCchildren) { 
vm,$slots = resolveSlots(renderChildren，parentVnode ,context ) 
vm,$forceUpdate() 


】} 

If (process.env,.NODE_ENV !== "production' ) { 
IsUpdatingCchildcomponent = false 

】} 


updatechildcomponent 的 逻辑 也 非常 简单 ， 由 于 更 新 了 _vnode ， 那 么 _vnode 对 应 的 实例 vm 
的 一 系列 属性 也 会 发 生变 化 ， 包 括 占 位 符 vm.$vnode 的 更 新 、 slot 的 更 新 ， listeners 的 更 
新 ， props 的 更 新 等 等 。 


e。 执行 update 钧 子 函 数 
If (IsDef(data) && IsPatchable(vnode)) 革 


for (LE=0; 工 < cbs.update.Jength; ++i) cbs.update[i](o1ldvnode，vnode) 
If (isDef(1I = data.hook) && isDef(I = I.update)) I(oLldvnode，vnode) 


回 到 patchvNode 画 数 ， 在 执行 完 新 的 vnode 的 prepatch 钩子 函数 ， 会 执行 所 有 module 的 
update 钩子 函数 以 及 用 户 自 定义 update 钩子 函数 ， 对 于 module 的 钩子 函数 ， 之 后 我 们 会 有 有 具 
体 的 章节 针对 一 些 具体 的 case 分 析 。 


。 完成 patch 过 程 


const oldch = oldvnode.children 
const ch = vnode.children 
1If (IsDef(data) && 1IsPatchabJle(vnode)) { 

for (LE=9; 工 < cbs.update,.length; ++i) cbs.update[I](oldvnode，vnode) 

If (isDef(I = data.hook) && isDef(I = 二 .update)) I(o1ldvnode，vnode ) 
】} 
If (IsUndef(vnode ,text)) { 

if (isDef(oldch) && isDef(ch)) 世 

If (oldch !== ch) updatechildren(elm，oldch，ch，insertedvnodeQueue， removeoOn1ly 


} else If (IsDef(chn)) { 
If (isDef(o1ldvnode.text)) node0ops,setTextContent(elm， ” ) 
addvnodes(elm，null1，ch，0，ch.length - 1，insertedvnodeQueue ) 


} else if (isDef(oldCch)) 蕊 
removevnodes(elm，oldch，9，oldch.Jength - 工 ) 

} else if (isDef(o1ldvnode.text)) 荆 
nodeops.setTextContent(elm， ' ) 


】} 
} else if (oldvnode.text !== Vvnode.text) 攻 
nodeops.setTextContent(eJlm，vnode ,text) 


如 果 vnode 是 个 文本 节点 且 新 旧 文 本 不 相同 ， 则 直接 替换 文本 内 容 。 如 果 不 是 文本 节点 ， 则 判断 它 


们 的 子 节 点 ， 并 分 了 几 种 情况 处 理 : 


1，oldch 尼 ch 都 存在 且 不 相 时 ， 使 用 updatechildren 本 数 来 更 新 子 节点 ， 这 


讲 。 


个 后 面 重 点 


2. 如 果 只 有 ch 存在 ， 表 示 旧 节点 不 需要 了 。 如 果 旧 的 节点 是 文本 节点 则 先 将 节点 的 文本 清除 ， 然 后 


通过 addvnodes 将 ch 批量 插 人 到 新 节点 elm 下 。 


3. 如 果 只 有 oldch 存在 ， 表示 更 新 的 是 空 节点 ， 则 需要 将 旧 的 节点 通过 removevnodes 全 部 清除 。 


4. 当 只 有 旧 节 点 是 文本 节点 的 时 候 ， 则 清除 其 节点 文本 内 容 。 
。 执行 postpatch 钧 子 函 数 


if (isDef(data)) { 


If (isDef(1I = data.hook) && isDef(1I = 工 .postpatch)) I(oldvnode，vnode) 


再 执行 完 patch 过 程 后 ， 会 执行 postpatch 钩子 本 数 ， 它 是 组 件 自 定 义 的 钩子 本 数 ， 有 则 执行 。 
那么 在 整个 _pathvnode 过 程 中 ， 最 复杂 的 就 是 updatechildren 方法 了 ， 下 面 我 们 来 单独 介绍 


记 5 


updateChildren 


function updatechildren (parentElIm，oldch，newch，insertedVvnodeQueue， 


Jet 01dStartIdx 0 

Jet newStartIdx 0 

Jet 01ldEndIdx = 0Jldch.Jength - 工 

let oldStartvnode = oldch[9] 

Jet oldEndvnode = oldch[oldEndIdx] 

Jet newEndIdx = newCch.Jength - 工 

let newStartvnode = newCch[9] 

Jet newEndvnode = newCch[newEndIdx] 

Jet 01dKeyToIdx，idxIno1d，vnodeToMove， refEJm 


// removeonly is a Special flag used only by <transition-group> 
// to ensure removed elements stay in correct relative positions 
// during leaving transitions 


removeonly) 荆 


const canMove = !removeon1ly 


If (process,env.NODE_ENV !== "production ') 攻 
checkDup1LicateKeySs(newcCh ) 


while (oldStartIdx <= 01dEndIdx && newStartIdx <= newEndIdx) { 

if (IsUndef(oldStartVnode)) 革 
oldStartVvnode = 0JldCch[++oldStartIdx] // vnode has been moved Jeft 

} else if (isuUundef(oldEndVvnode)) 并 
oldEndvnode = oldch[--oldEndIdx] 

} else if (samevnode(oJldStartVnode，newStartvnode)) 
patchvnode(oldStartVvnode，newStartvnode，insertedvnodeQueue ) 
oldStartVvnode = oldch[++oldStartIdx] 
newStartvnode = newCh[++newStartIdx] 

} else if (samevnode(oldEndvnode，newEndVvnode)) 革 
patchvnode(o1ldEndvnode，newEndVvnode，insertedvnodeQueue ) 
oldEndvnode = oldch[--oldEndIdx] 
newEndvnode = newCch[--newEndIdx] 

} else if (samevnode(oldStartVnode，newEndvnode)) 人 ZL/ Vnode moved Fr 
patchvnode(o1ldStartVvnode，newEndvnode，insertedvnodeQueue ) 


canMove && nodeops,insertBefore(parentElm，oldStartVvnode.elm，nodeops .nextSib 
Jing(oldEndvnode.elm) ) 
oldStartVvnode = oldch[++oldStartIdx] 
newEndvnode = newCch[--newEndIdx] 
} else if (samevnode(oldEndvnode，newStartvnode)) 人 ZL/ Vnode nm 
patchvnode(o1ldEndvnode，newStartvnode，insertedvnodeQueue ) 


canMove && nodeops,insertBefore(parentElm，oldEndvnode.eJlm，oldStartVvnode .elm 


oldEndvnode = oldch[--oldEndIdx] 
newStartvnode = newCh[++newStartIdx] 
TelseEt 
If (isUundef(o1ldKeyToIdx)) olLdKeyToIdx = createKeyTo01dIdx(o1Lldch，oldStartIdx， 
0oLdEndIdx ) 
IdxInold = IsDef(newStartVvnode .key) 
? 0J1dKeyToIdx[newStartVvnode ,key] 
findIdxInold(newStartVvnode，oldch，oldSstartIdx，oldEndIdx ) 
if (isUndef(IdxInold)) { 7VZ/ New element 
createElm(newStartvVnode，insertedvnodeQueue，parentEJm，oldStartvnode .elm， 
false，newCch，newStartIdx) 
else { 

vnodeToMove = oldch[idxInold] 

If (samevnode(vnodeToMove，newStartvnode)) 六 
patchvnode(vnodeToMove，newStartVvnode，insertedvnodeQueue ) 
oldch[idxInold] = undefined 
canMove && nodeops.insertBefore(parentEJm，vnodeToMove ,elm，oldStartVnode 

.elm) 

JelseEd 
// Same key but different element .treat as new element 
createElm(newStartvnode，jinsertedvnodeQueue，parentElIm，oldSstartVnode .elm 

false，newCch，newStartIdx ) 


】} 


newStartvnode = newCh[++newStartIdx] 


】} 

If (olLdStartIdx > 01LdEndIdx) 攻 
refEJm = IsUndef(newCch[newEndIdx + 1]) ? null1 : newCch[newEndIdx + 工 ] .elm 
addvnodes(parentElm，refEJlm，newCch，newStartIdx，newEndIdx，insertedvnodeQueue ) 

} else if (newStartIdx > newEndIdx) { 
removevnodes(parentElm，oldch，oldStartIdx，oldEndIdx) 


updatechildren 的 逻辑 比较 复杂 ， 直 接 读 源 码 比较 蜀 沁 ， 我 们 可 以 通过 一 个 具体 的 示例 来 分 析 它 。 


<tempJate> 
<div Id="app"> 
<dIV> 
<U]> 
<]1I V-for="item in Items” :key="item.iId">{{t Item.Val }}</]I> 
</U]> 
</div> 
<button @click="change">change</button> 
</div> 
</tempJate> 


<SCriIpt> 
export default 1{ 
name: "App '， 


data() 
return 并 
Items: [ 
{id: 0，Vval: 'A' 
位 中 TVal BT 
d 2 Van cc 和 
{id: 3，Vval: 'D'} 
] 
} 
】 
methods: 攻 
change() 攻 
this.items.reverse().push({tid: 4，val: "E'}) 
} 
】} 
】} 
</Script> 


当 我 们 点 击 ”change 按钮 去 改变 数据 ， 最 终 会 执行 到 updatechildren 去 更 新 11 部 分 的 列表 数 
据 ， 我 们 通过 图 的 方式 来 描述 一 下 它 的 更 新 过 程 : 


组 件 更 新 


第 - 步 : 


oldStartlndex oldEndlndex 


| 


newStartlndex newEndlndex 


第 二 步 : 


dStartIndex 


newsStartlndex 


oldEndlndex 


newEndlndex 
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oldStartlindex oldEndlndex 


newsStartlndex newEndlndex 


第 四 步 : 


oldStartlndex 
oldEndlndex 


newsStartindex “newEndlndex 


168 


次 
六 
涅 
池 


第 五 步 : 


oldStartlndex 
oldEndlndex 


newEndlndex 


newsStartlndex 


oldStartlndex 
oldEndlndex 


newEndlndex 


newStartlndex 


总 结 


E 


组 件 更 新 的 过 程 核心 就 是 新 旧 vnode diff， 对 新 旧 节 点 相同 以 及 不 同 的 情况 分 别 做 不 同 的 处 理 。 新 旧 节 
点 不 同 的 更 新 流程 是 创建 新 节点 -> 更 新 父 占 位 符 节 点 -> 删除 旧 节 点 ; 而 新 旧 节 点 相同 的 更 新 流程 是 去 获 
取 它 们 的 children， 根 据 不 同情 况 做 不 同 的 更 新 逻辑 。 最 复杂 的 情况 是 新 旧 节 点 相同 且 它 们 都 存在 子 节 
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点 ， 那 么 会 执行 updatechildren 逻辑 ， 这 块 儿 可 以 借助 画图 的 方式 配合 理解 。 


/为 


原理 


props $mount 


defineReactive 


getter 


同 n render watcher 


addDep 


computed 


updateComponent 


computed watcher 


User callback 


User watcher 
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纳 译 


之 前 我 们 分 析 过 模板 到 真实 DOM 浑 染 的 过 程 ， 中 间 有 一 个 环节 是 把 模板 编译 成 render 画 数 ， 这 个 
过 程 我 们 把 它 称 作 编 译 。 


虽然 我 们 可 以 直接 为 组 件 编写 render 本 数 ， 但 是 编写 template 模板 更 加 直观 ， 也 更 符合 我 们 的 
开发 习惯 。 


Vue.js 提供 了 2 个 版 本 ， 一 个 是 Runtime + Compiler 的 ， 一 个 是 Runtime only 的 ， 前 者 是 包含 编译 代码 
的 ， 可 以 把 编译 过 程 放 在 运行 时 做 ， 后 者 是 不 包含 编译 代码 的 ， 需 要 借助 webpack 的 vue-loader 事 
先 把 模板 编译 成 render 本 数 。 


这 一 章 我 们 就 来 分 析 编 译 的 过 程 ， 对 编译 过 程 的 了 解 会 让 我 们 对 Vue 的 指 分、 内 置 组件 等 有 更 好 的 理 
解 。 不 过 由 于 编译 的 过 程 是 一 个 相对 复杂 的 过 程 ， 我 们 只 要 求 理解 整体 的 流程 、 输 入 和 输出 即 可 ， 对 
于 细节 我 们 不 必 抠 太 细 。 有 些 细节 比如 对 于 _ slot 的 处 理 我 们 可 以 在 之 后 去 分 析 播 槽 实现 的 时 候 再 详 
细 分 析 。 


编译 人 口 


当 我 们 使 用 Runtime + Compiler 的 Vue.js， 它 的 人 口 是 src/plLatforms/web/entry-runtime-with- 
compiler.js ， 看 一 下 它 对 $nmount 画 数 的 定义 : 


const mount = Vue.prototype.$mount 

Vue.prototype.$mount = function ( 
el?93 StrIzngl | Element， 
hydrating?: boolean 

): Component 攻 
el = el && duery(el) 


/* Istanbul 1Ignore ff */ 


If (el === document .body || el === document .documentE1Lement ) 六 
process.env.NODE_ENV !== "production”&& warn( 
“Do not mount Vue to <htm]l> or <body> - mount to normal elements Instead 
) 
euUm 刘 蕊 as 


const options = this,.$options 
// resolve template/vel and convert to render function 
If (!options.render) 
Jet tempJlate = options,template 
If (template) 革 
If (typeof tempJlate === :String') 
if (tempJlate.charAt(0) === '#') { 
tempJlate = IdToTemplate(tempJate) 
TISEamDUULLOnOEGEETT 0 
If (process.env.NODE_ENV !== :production'” && !template) 革 
warn( 
Templateyelementnotifoundorm mseempty Etoptaonsatemplate 7 
thIs 


} 
} else If (template.nodeType) 荆 


temp1late = tempJlate.InnerHTML 
) else 1{ 
If (process.env.NODE_ENV !== "production') 攻 
warn('invalid template option:” + tempJlate，this) 
Feturmnithnas 
)else if (el) 1{ 
temp1late = getOouterHTML(eJ) 


】} 
If (template) 革 


/* istanbul Ignore 工 “/ 
If (process,env.NODE_ENV !== "production'&& config,.performance && mark) 攻 
mark(' compile ') 


const { render，staticRenderFns } = compIleToFunctions(tempJlate，({ 
ShouldDecodeNew1lLines， 
ShouldDecodeNew]linesForHref， 
delimiters: options .delimiters， 
comments: options.commentSs 
小 Ens) 
options render = render 
options ,staticRenderFns = staticRenderFns 


Stanoueaqgnoesn 7 

If (process,env.NODE_ENV !== ' production'&& config.performance && mark) { 
mark( ' compile end ' ) 
measure( Vvue $tthis,_name} compile ， "compIile'， "compile end ') 


return mount,call(this，el，hydrating) 


这 段 本 数 逻辑 之 前 分 析 过 ， 关 于 编译 的 人 口 就 是 在 这 里 : 


const { render，staticRenderFns } = compileToFunctions(tempJate，， 攻 
ShouldpDecodeNew1lines， 
ShouldDecodeNew1linesForHref， 
deJimiters: options .delimiters， 
comments: options.comments 
Enas) 
options .render = render 
options .statIicRenderFns = staticRenderFns 


comp1IleToFunctions 方法 就 是 把 模板 tempJate 编译 生成 render 以 及 staticRenderFns 它 
的 定义 在 src/plLatforms/web/compiler/index.js 中 : 


Import { baseo0ptions } from ",/Voptions' 
Import { createCompIiler } from "compiler/Vindex' 


const { compile，compileToFunctions } = createCcompiler(baseoptions ) 


export { compile，compileToFunctions } 


可 以 看 到 compileToFunctions 方法 实际 上 是 createcompiler 方法 的 返回 值 ， 该 方法 接收 一 个 编 
译 配置 参数 ， 接 下 来 我 们 来 看 一 下 createcompiler 方法 的 定义 ， 在 src/compiler/index.js 
中 : 


// createCcompilerCreator ”allows creating complilers that use alternative 
// parser/optimizer/vcodegen，e.g the SSR optimizing compIler ， 
// Here we just export a defau]lt compiler using the defau]lt parts ， 
export const createCcompiler = createCcompilerCreator(function baseCcompIile (人 
template: String， 
options: Compileroptions 
): CompiIiledResult 攻 
const ast = parse(tempJlate.trim()，options) 
If (options.optimize !== false) 攻 
optimize(ast，options ) 
} 
const code = generate(ast，options ) 
return 攻 
ast， 
render: code.render， 
StaticRenderFns: code.staticRenderFns 
} 
}) 


createCcompiler 方法 实际 上 是 通过 调用 createcompilercreator 方法 返回 的 ， 该 方法 传人 的 参数 
是 一 个 函数 ， 真 正 的 编译 过 程 都 在 这 个 basecompile 画 数 里 执行 ， 那 么 createcompilercreator 
又 是 什么 呢 ， 它 的 定义 在 src/compiler/create-compiler.js 中 : 


export function createCompilerCreator (baseCcompiIle: Function): Function 攻 
return function createCompiler (baseo0ptions: Compileroptions) 1{ 
function compile (人 
template: String， 
options?: Compileroptions 
) CompIledResult 攻 
const finaloptions = 0bject,create(base0ptions ) 
const errors = [] 
const tips = [] 
finaloptions.warn = (msg，tip) => 
(tip ?3 tips : errors),.push(msg) 


If (options) { 
// merge custom modules 
If (options .modules) 攻 
finaloptions .moduJles = 
(baseoptions .modules || []).concat(options .modules ) 
} 
// merge custom directives 
If (options .directives) 并 
finaloptions .directives = extend ( 
Object.create(base0ptions .directives || nul1)， 
options .directives 


// copy other options 
for (const key in options) 
if (key !== 'modules' && key !== 'directives' ) 六 
finaloptions[key] = options[key] 


const compiled = baseCcompIle(tempJlate，finaloptions ) 

If (process.env.NODE_ENV !== "production' ) 革 
errors.push,.apply(errors，detectErrors(compIiled.ast)) 

Compiled,.errors = errors 

comp1Iiled.tips = tips 

return compIled 


return 并 
CompIle， 
compIleToFunctions: createcompileToFunctionFn(compile) 


可 以 看 到 该 方法 返回 了 一 个 _createcompiler 的 范 数 ， 它 接收 一 个 baseoptions 的 参数 ， 返 回 的 
是 一 个 对 象 ， 包 括 compile 方法 属性 和 compileToFunctions 属性 ， 这 个 compileToFunctions 
对 应 的 就 是 $mount 本 数 调用 的 compileToFunctions 方法 ， 它 是 调用 
createCompileToFunctionFn 方法 的 返回 值 ， 我 们 接 下 来 看 一 下 createCompileToFunctionFn 方 
法 ， 它 的 定义 在 src/compiler/to-function/js 中 : 


export functIon createCcompaleToFunctazonFn (complle: Function)i EunctIon 1{ 
const cache = 0bject,create(nul1) 


return function compIileToFunctions (人 
template: String， 
options?: CompIileroptions， 
Vvm?2: Component 

): CompIiledFunctionResuJt 攻 
options = extend({}，options ) 
const warn = options ,warn || basewarn 
delete options.warn 


/* 1ISstanbul 1Ignore 工 f */ 
If (process.env.NODE_ENV !== ' production' ) 革 
// detect possible CSP restriction 
电信 
newiFunctaonmurecucnEtey 
Jucaccna(eDt 
If (e.toString(),match(/Zunsafe-eval|CSP/Z) ) 攻 


warn( 
ESeemsyOuUEaAeEUsIngEitnenstangdalonmeabunld oaVUeS SS 站 王 > 门 帮 直 
environment with Content Security Policy that prohibits unsafe-eval，， 


"The template compiler cannot work in this environment.， Consider ”+ 
"relaxing the policy to allow unsafe-eval or pre-compiling your ”上 + 
IEempiatesnmcoernenderahunctITonsa 


和 倒 checkacachne 
const key = options ,delimiters 
? String(options ,delimiters) + template 
temp1Late 
If (cache[Kkey]) 
return cache[key] 


// compile 
const compiled = compile(template，options ) 


// check compilation errors/tips 
If (process ,env,.NODE_ENV !== "production' ) 攻 
If (compiled.errors && compiled.errors,length) 革 


warn( 
Error compItang templateNnNnSttemplateTyNnNn 二 
compiled.errors.map(e =>  - $fte} ). join(' An' ) + Xn'， 
Vm 

) 


If (compiled.tips && compIiled.tips, length) 
compiIiled.tips.forEach(msg => tip(msg，vm)) 


帮 和 EUTnEcouesnnecaunctaons 

const res = 1 

const fnGenErrors = [ 

res.render = createFunction(compIiled.render，TfnGenErrors ) 

res.SstatIicRenderFns = compiled.staticRenderFns .map(code => 并 
return createFunction(code，TfnGenErrors ) 


了 ) 


// check function generation errors ， 
// this should only happen if there is a bug in the compiler Itself. 
// mostly for codegen development use 
SEEamouleagmOGS 人 
If (process ,env,NODE_ENV !== 'production') 攻 
If ((!compiled.errors || !compiled,errors,.length) && fnGenErrors.Jength) 革 


warn( 
JEaneducoogenerabkemrenmnderhunckcronAnNm Er 
fnGenErrors .map(({t err，code }) =>  $ferr.toString()} inxnxn$ftcodeyxn ), 
oin( An' )， 
Vm 


return (cache[key] = res) 


至 此 我 们 总 算 找到 了 compileToFunctions 的 最 终 定义 ， 它 接收 3 个 参数 、 编 译 模板 template ， 
编译 配置 options 和 YVue 实例 vm 。 核 心 的 编译 过 程 就 一 行 代码 : 


const compiled = compile(template，options) 


compile 本 数 在 执行 createcompileToFunctionFn 的 时 候 作 为 参数 传人 ， 它 是 createcompiler 
本 数 中 定义 的 compile 本 数 ， 如 下 : 


function compIile (人 
template: String， 
options?: Compileroptions 
): CompIiledResult 攻 
const finaloptions = 0bject.create(base0ptions ) 
const errors = [ 
const tips = [] 
finaloptions,warn = (msg，tip) => 攻 
(tip ? tips : errors).push(msg) 


If (options) 1{ 
// merge custom modules 
If (options .modules) 革 
finaloptions .modules = 
(baseoptions ,modules || [),concat(options.modules ) 
} 
// merge custom directives 
If (options .qirectives) 并 
finaloptions .directives = extend ( 
Object.create(baseoptions .directives || nul1l1)， 
options ,directives 


】} 


// copy other options 
for (const key in options) 区 
if (key !== 'modules' && key !== 'directives' ) 革 
finaloptions[key] = options[key] 


const compiled = baseCcompiIile(tempJlate，finaloptions ) 

If (process.env.NODE_ENV !== "production' ) { 
errors.push,apply(errors，detectErrors(compiled.ast)) 

】} 

CompiIiled.errors = errors 

CompiIled.tips = tips 

return compIled 


compile 画 数 执行 的 逻辑 是 移 处 理 配置 参数 ， 真 正 执行 编译 过 程 就 一 行 代码 : 


const compiled = baseCcompile(template，finaloptions ) 


baseCompile 在 执行 createCompilercreator 方法 时 作为 参数 传人 ， 如 下 : 


export const createCompiler = createCcompilerCreator(function baseCompile (人 
templatceswstrangl， 
options: Compileroptions 
): CompIiledResult 攻 
const ast = parse(tempJlate.trim()，options ) 
optimize(ast，options ) 
const code = generate(ast，options ) 
euUmnE 攻 
ast， 
render: code.render， 
StaticRenderFns: code.staticRenderFns 
】} 
了]) 


所 以 编译 的 人 口 我 们 终于 找到 了 ， 它 主要 就 是 执行 了 如 下 几 个 逻辑 : 
。 解析 模板 字符 串 生 成 AST 


const ast = parse(template,trim()，options) 
。 优化 语法 树 

optimize(ast，options ) 

。 生成 代码 


const code = generate(ast，options ) 


那么 接 下 来 的 章节 我 会 带 大 家 去 逐步 分 析 这 几 个 过 程 。 


总 结 

编译 入口 逻 辑 之 所 以 这 么 绕 ， 是 因为 Vue.js 在 不 同 的 平台 下 都 会 有 编译 的 过 程 ， 因 此 编译 过 程 中 的 依 

赖 的 配置 baseoptions 会 有 所 不 同 。 而 编译 过 程 会 多 次 执行 ， 但 这 同一 个 平台 下 每 一 次 的 编译 过 程 

配置 又 是 相同 的 ， 为 了 不 让 这 些 配置 在 每 次 编译 过 程 都 通过 参数 传人 ，Vue.js 利用 了 画 数 柯 里 化 的 技巧 
很 好 的 实现 了 baseoptions 的 参数 保留 。 同 样 ，Vue,js 也 是 利用 本 数 柯 里 化 技巧 把 基础 的 编译 过 程 

画 数 抽 出 来 ， 通 过 createcompilercreator(basecompile) 的 方式 把 真正 编译 的 过 程 和 其 它 逻 辑 如 

对 编译 配置 处 理 、 缓 存 处 理 等 剥离 开 ， 这 样 的 设计 还 是 非常 巧妙 的 。 


parse 


编译 过 程 首先 就 是 对 模板 做 解析 ， 生 成 AST， 它 是 一 种 抽象 语法 树 ， 是 对 源 代 码 的 抽象 语法 结构 的 树 
状 表现 形式 。 在 很 多 编译 技术 中 ， 如 babel 编译 ES6 的 代码 都 会 先生 成 AST。 


这 个 过 程 是 比较 复杂 的 ， 它 会 用 到 大 量 正 则 表达 式 对 字符 串 解 析 ， 如 果 对 正则 不 是 很 了 解 ， 建 议 先 去 
补习 正则 表达 式 的 知识 。 为 了 直观 地 演示 parse 的 过 程 ， 我 们 和 允 来 看 一 个 例子 : 


<UJ :class="bindCcls"” class="1ist”VvV-iIf="isShow"> 

<]1I VvV-for="(Iitem, Index) in data"”@c1lick="clickItem(Iindex)">{{titem}y}:{ttindex}y}+</ 
工 > 
</UJ> 


经 过 parse 过 程 后 ， 生 成 的 AST 如 下 : 


ast = { 
EVD 
用 o CI 
ESSETSiaes 区 
"attrsMap': 


下 SSSobanaGlsn 
GlassaelaSsie 
EVD DELSSIOW 

】 

ESSIOWEE 


ECondgneonmse 
“exp sshow 
"block': // ul ast element 
}]， 
panenmtocundetanmed 
门下 STOREGSR 


EstateElassolnst 
ElassBaundangs bndcls 
Chaldren'  [ 
YET 
ET 
aaEEISLESTE IT 
name alQOclack 
IEValuecn clnckreemendex 站 
j]， 


ESMabie EE 必 
WOclmckoc cackneemandex 
VEore kemsndexJ)nnEadqatan 
] 
parenen auuwaskEe emen 
,plan ftalse， 
EEVemESw 和 人 


'click': { 


Valuesnsaansclnekneem 人 ndex)E 

】 
"hasBindings': truey， 
Oldarase 
让 夺 cSo Eee 
ceratcori nudex 
Chhamdaem sa 

EVDese 2 

WexpFessnone ssemnjeendy snmdexy) 


EeextoeeEEemhhandexy ae 
mwEOKkenses il 
全 Qbandangsaatemy 


他 Qbandrngnandexs 小 
j] 


可 以 看 到 ， 生 成 的 AST 是 一 个 树 状 结构 ， 每 一 个 节点 都 是 一 个 ast element ， 除 了 它 自 身 的 一 些 属 
性 ， 还 维护 了 它 的 父子 关系 ， 如 parent 指向 它 的 父 节 点 ， children 指向 它 的 所 有 子 节 点 。 先 对 
AST 有 一 些 直 观 的 印象 ， 那 么 接 下 来 我 们 来 分 析 一 下 这 个 AST 是 如 何 得 到 的 。 


整体 流程 
首先 来 看 一 下 _parse 的 定义 ， 在 src/compiler/parser/index.js 中 : 


export function parse (人 
templLate: string， 
options: CompIJleroptions 
)EEASTELememtalivondEEt 
getFnsAndCconfigFromoptions(options ) 


parseHTML(temp1late， 攻 
[7AWiEatolniS 本 
Start (tag，attrs，unary) 荆 
Jet element = createASTEJement(tag，attrs ) 
processE1Lement(eJement ) 
treeManagement () 


}， 


end () 荆 


treeManagement () 
closeEJlement() 


】， 


chars (text: String) { 


handleText() 
createchildrenASTOfText() 
】 
Comment (text: String) 革 
createchildrenASTOfComment () 
】} 
】) 


return astRootE]Lement 


parse 画 数 的 代码 很 长 ， 贴 一 逼 对 同学 的 理解 没有 好 处 ， 我 先 把 它 拆 成 伪 代 码 的 形式 ， 方 便 同 学 们 
对 整体 流程 先 有 一 个 大 致 的 了 解 。 接 下 来 我 们 就 来 分 解 分 析 每 段 伪 代 码 的 作用 。 


从 options 中 获取 方法 和 配置 
对 应 伪 代 友 : 


getFnsAndCconfigFromoptions(options ) 


parse 酚 数 的 输入 是 template 和 options ， 输 出 是 AST 的 根 节 点 。 template 就 是 我 们 的 模 
板 字 符 串 ， 而 options 实际 上 是 和 平台 相关 的 一 些 配 置 ， 它 的 定义 在 
src/platforms/web/ycompiler/options 中 : 


Import { 
ISPreTag， 
mustUseProp， 
SReservedTag， 
getTagNamespace 
Or 六 mGLe Xe 


Import modules from '"./Vmodules/index 

Import directives from '",V/directives/index' 

Import { genStaticKeys } from "Shared/util'， 

Import { isUnaryTag，canBeLeftopenTag }》 from ".VUtIJT' 


export const baseoptions: Compileroptions = { 
eXxpectHTML: true， 
modules， 
directives， 
IISPreTag， 
ISUnaryTag， 
mustUseProp， 
CanBeLeftoOopenTag ， 
IISReservedTag， 
getTagNamespace， 
StaticKkKeys: genStaticKeys(modules) 


这 些 属性 和 方法 之 所 以 放 到 platforms 目录 下 是 因为 它们 在 不 同 的 
同 的 。 


平台 (web 和 weex) 的 实现 是 不 
我 们 用 伪 代 码 getFnsAndconfigFromoptions 表示 了 这 一 过 程 ， 它 的 实际 代码 如 下 : 
warn = options.warn || basewarn 
plLatformIsPreTag = options, IsPreTag || no 
plLatformMustUseProp = 


options.mustUseProp || no 
plLatformGetTagNamespace 


options .getTagNamespace || no 
transforms 


plLuckModuleFunction(options ,moduJjes， 
preTransforms 


"transformNode ' ) 
plLuckModuleFunction(options .modules， preTransformNode ' ) 
postTransforms = pluckModuleFunction(options ,moduJles， 
deJlimiters 


"postTransformNode ' ) 
options .deJlimiters 


这 些 方法 和 配置 都 是 后 续 解 析 时 候 需 要 的 ， 可 以 不 用 去 管 它们 的 具体 作用 ， 我 们 先 往 后 看 。 
解析 HTML 模板 


对 应 伪 代 码 : 


parseHTML(template，options ) 


对 于 template 模板 的 解析 主要 是 通过 parseHTML 画 数 ， 它 的 定义 在 


Src/Vcompiler/VparserVvhtmJl-parser 中 : 


export functaion parseHTML (html，optzions)) 六 
let lastTag 


while (htm1) 
If (!LastTag || !isPJainTextEJLement(]LastTag ) ){ 


Jet textEnd = htmJl, Indexof(' < ') 
If (textEnd 


=== 0) { 
If(matchComment ) 


advance(commentLength ) 
Contanue 


】} 
If(matchDoctype) 


advance(doctypeLength ) 
continue 


】} 
If(matchEndTag) 1 


advance(endTagLength ) 
parseEndTadg () 
continue 


】} 


If(matchStartTag) 工 


parseStartTag () 
handleStartTag () 
continue 
】 
} 
handleText() 
advance(textLength ) 
else ({ 
hand]lePJlainTextEJLement( ) 
parseEndTag ( ) 


由 于 parseHTML 的 轴 辑 也 非常 复杂 ， 因 此 我 也 用 了 伪 代 码 的 方式 表达 ， 整 体 来 说 它 的 逻辑 就 是 循环 
解析 template ， 用 正则 做 各 种 匹配 ， 对 于 不 同情 况 分 别 进行 不 同 的 处 理 ， 直 到 整个 ttmplate 被 解析 
完毕 。 在 匹配 的 过 程 中 会 利用 advance 西数 不 断 前 进 整个 模板 字符 串 ， 直 到 字符 串 末 尾 。 


function advance (n) { 
Index += n 
htm1l = html.substring(Cn) 
】 


为 了 更 加 直观 地 说 明 advance 的 作用 ， 可 以 通过 一 副 图 表示 : 


IndexX 


div class=“a "><Span>{f item }》</span></div> 


调用 advance 画 数 : 
advance(4) 
得 到 结果 : 


IndexX 


class=“a"><Span>{ffitem </span></div> 


匹配 的 过 程 中 主要 利用 了 正则 表达 式 ， 如 下 : 


const attribute = /ANSsx*([ANs"I<>N\/=]+)(?:Nsx*(=)Ns*(?:"([An]*)o+|l'([A*)+|([ANs"= 


<> ]+)))?/ 
const ncname = '[a-zA-Z_][NAAwNNA-NNA.]” 
const gdqnameCapture = ((?:$tncname}AAX:)?${ftncname}) 


const startTagopen = new RegExp( ^<${qnamecCcapture} ) 
const startTagClose = /AAS (NM?2 )>/ 

const endTag = new RegExp( `A^A<\XV${qnameCcapture}[A>]*> ) 
const doctype = /A<!DOCTYPE [A>]+>/I 

const Comment = /A<IN--/ 

const conditionalComment = /A<INL/ 


些 正则 表达 式 ， 我 们 可 以 匹配 注释 节点 、 文 档 类 型 节点 、 开 始 闭合 标签 等 。 
注释 节点 、 文 档 类 型 节点 
对 于 注释 节点 和 文档 类 型 节点 的 匹配 ， 如 果 匹 配 到 我 们 仅仅 做 的 是 做 前 进 即 可 。 


I (comment ,test(htm1)) 攻 
const commentEnd = htmJl.indexof('-->') 


If (commentEnd >= 0) 区 
If (options,shouldKeepComment ) 1{ 
options.comment(html,Ssubstring(4，commentEnd ) ) 
} 
advance(commentEnd + 3) 
continue 


If (conditionalComment .test(htm1)) 攻 
const conditionalEnd = htm1l.indexof(' ]>') 


If (conditionalEnd >= 0) 六 
advance(conditionalEnd + 2) 
continue 


const doctypeMatch = htm1l.match(doctype) 

If (doctypeMatch) 并 
advance(doctypeMatch[0].1Lengtnh ) 
continue 


对 于 注释 和 条 件 注释 节点 ， 前 进 至 它们 的 末尾 位 置 ; 对 于 文档 类 型 节点 ， 则 前 进 它 自身 长 度 的 距离 。 
。 开始 标签 


const StartTagMatch = parseStartTag () 
If (StartTagMatch) 区 
handleStartTag(StartTagMatch ) 
If (shouldIgnoreFirstNewJline(JastTag，htm1)) 
advance(I) 


j 


continue 


首先 通过 parsestartTag 解析 开始 标签 : 


fiunccroniiparsestactraog 叶 (全 厦 人 
const start = htm]l.match(startTagopen ) 
If (Start) 革 
const match = 苹 
tagName: Start[IL]， 
aeress lg 区 
Start: Index 
】} 
advance(start[0].Jlength ) 
Let end，attr 
while (!(end = htm1lL.match(startTagClose)) && (attr = htm1l.match(attribute))) 攻 
advance(attr[0].1Llength ) 
match,attrs,.push(attr ) 
】} 
if (end) 二 
match,unarySlash = end[1I] 
advance(end[0].Jlength ) 
match.end = Index 
return match 


对 于 开始 标签 ， 除 了 标签 名 之 外 ， 还 有 一 些 标签 相关 的 属性 。 酚 数 先 通过 正则 表达 式 startTagopen 
匹配 到 开始 标签 ， 然 后 定义 了 _ match 对 象 ， 接 着 循环 去 匹配 开始 标签 中 的 属性 并 诡 加 到 
match.attrs 中 ， 直 到 匹配 的 开始 标签 的 闭合 符 结束 。 如 果 匹 配 到 闭合 符 ， 则 获取 一 元 斜 线 符 ， 前 
进 到 闭合 符 尾 ， 并 把 当前 索引 赋值 给 match.end 。 


parsesStartTag 对 开始 标签 解析 拿 到 match 后 ， 紧 接着 会 执行 handlestartTag 对 match 做 
处 理 : 


function handleStartTag (match) 六 
const tagName = match.tagName 
const unarySlash = match.unarySlash 


If (expectHTML ) 于 
If (lastTag === '"p' && isNonPhrasingTag(tagName ) ) 革 


parseEndTag(JastTag ) 


} 
If (canBeLeftopenTag(tagName) && lastTag === tagName) 1 
parseEndTag(tagName ) 
】} 
】} 
const unary = isUnaryTag(tagName) || !!unarySJlash 


const 1 = match,.attrs, length 

const attrs = new Array(1) 

Oo 硬 ( 全 IC 有 三 本 @ < 本 证) 帮 作 
const args = match.attrs[I] 


if (IS_REGEX_CAPTURING_BROKEN && args[0].indexof('""') === -1) { 
if (args[3] === '')({ delete args[3] } 
if (args[4] === '') 1 delete args[4] } 
if (args[5] === "')({ delete args[5] } 

】} 

const Value = args[3] || args[4] | args[5] 11 2 

const ShouldDecodeNew]Jlines = tagName === 'a'  && args[1] === href 


? options,shouldDecodeNew]linesForHref 
: options.shouldDecodeNewJlines 
attrs[I] = { 
name: args[1]， 
Value: decodeAttr(value，shouldDpecodeNew1lines) 


If (!unary) 攻 


Stack.push({t tag: tagName，]LowerCasedTag: tagName,toLowerCase()，attrs: attrs } 
JastTag = tagName 


If (options,start) { 


options,.start(tagName，attrs，unary，match.start，match.end ) 


handlestartTag 的 核心 逻辑 很 简单 ， 先 判断 开始 标签 是 否 是 一 元 标签 ， 类 似 <img>、<br/> 这 
样 ， 接 着 对 match.attrs 通 历 并 做 了 一 些 处 理 ， 最 后 判断 如 果 非 一 元 标签 ， 则 往 _ stack 里 push 一 
个 对 象 ， 并 且 把 tagName 赋值 给 lastTag 。 至 于 stack 的 作用 ， 稍 后 我 会 介绍 。 


最 后 调用 了 options.start 回调 本 数 ， 并 传人 一 些 参 数 ， 这 个 回调 酚 数 的 作用 稍 后 我 会 详细 介绍 。 


。 闭合 标签 


const endTagMatch = htm]l,match(endTag ) 
If (endTagMatch) 荆 
const curIndex = Index 


advance(endTagMatch[0].Jlength ) 
parseEndTag(endTagMatch[1]，curIndex，index) 
continue 


先 通过 正则 endTag 匹配 到 闭合 标签 ， 然 后 前 进 到 闭合 标签 未 尾 ， 然 后 执行 parseEndTag 方法 对 闭 
合 标签 做 解析 。 


function parseEndTag (tagName，Start，end) 攻 
let pos，1LowerCasedTagName 
If (Start == null1) start = Index 
If (end == null) end = Index 


If (tagName) 1 
JowerCasedTagName = tagName.toLowerCase() 


If (tagName) 1 
for (pos = stack,.length - 1 pos >= 0 pos--) { 
If (Stack[pos].1LowerCasedTag === LowerCasedTagName ) f 
break 


If (pos >= 0) 攻 
for (let 工 = Stack.length - 1;) 工 >= pos;) I--) { 

If (process,env.NODE_ENV !== "production”&& 
( 工 > pos || !tagName) && 
options ,warn 

) 荆 
options.warn( 

tag <${fstack[Il,tag}y> has no matching end tag., 


If (options.end) 区 
options ,end(stack[il.tag，start，end ) 


】} 
Stack.Jength = pos 


JastTag = poSs && Stack[pos - 1].tag 
} else If (LowerCasedTagName === "br' ) 并 
If (options,Sstart) 
options.start(tagName，[]，true，start，end ) 
】} 
} else if (LowerCasedTagName === pp) { 
If (options.start) 区 


parse 


options.start(tagName，[]，Tfalse，Sstart，end ) 
} 
If (options ,end) 工 
options.end(tagName，Sstart，end ) 
】 
】 
】 


parseEndTag 的 核心 还 辑 很 简单 ， 在 介绍 之 前 我 们 回顾 一 下 在 执行 handlestartTag 的 时 候 ， 对 于 
非 一 元 标签 〈《 有 endTag) 我 们 都 把 它 构造 成 一 个 对 象 压 人 到 stack 中 ， 如 图 所 示 : 


handleStartTag parseEndTag 


Stack 


那么 对 于 闭合 标签 的 解析 ， 就 是 倒序 stack ， 拷 到 第 一 个 和 当前 endTag 匹配 的 元 素 。 如 果 是 正常 
的 标签 匹配 ， 那 么 stack 的 最 后 一 个 元 素 应 该 和 当前 的 endTag 匹配 ， 但 是 考虑 到 如 下 错误 情况 : 


<div><Span></div> 


这 个 时 候 当 endTag 为 </div> 的 时 候 ， 从 stack 尾部 找到 的 标签 是 <span> ， 就 不 能 匹配 ， 
此 这 种 情况 会 报警 告 。 匹 配 后 把 栈 到 pos 位 置 的 都 弹出 ， 并 从 stack 尾部 拿 到 lastTag 。 


最 后 调用 了 options.end 回调 本 数 ， 并 传人 一 些 参数 ， 这 个 回调 画 数 的 作用 稍 后 我 会 详细 介绍 。 
。 文本 


190 


et text，rest， next 
If (textEnd >= 0) 攻 
rest = 


while (人 


htm1.SlLice(textEnd ) 


!endTag,test(rest) && 
!StartTagopen,test(rest) && 
!Comment ,test(rest) && 
!conditionalComment ,test(rest ) 


JE 


next = 
if (next < 0) break 
textEnd += next 
rest = 
】} 
text = 
advance(textEnd ) 


车 (textEnd < 0) 
text = htm1l 
htm1 = 


rest,indexof(' < ， 工 ) 


htm1.S1Lice(textEnd ) 


htm1l.Ssubstring(9，textEnd ) 


If (options,chars && text) 革 


options.chars(text) 


】} 


接 下 来 判断 textEnd 是 否 大 于 等 于 0 的 ， 满 足 则 说 明 到 从 当前 位 置 到 textEnd 位 置 都 是 文本 ， 并 
且 如 果 < 是 纯 文 本 中 的 字符 ， 束 继续 找到 真正 的 文本 结束 的 位 置 ， 然 后 前 进 到 结束 的 位 置 。 


再 继续 判断 textEnd 小 于 0 的 情况 ， 


给 了 text 。 


最 后 调用 了 options ,chars 


回调 本 数 ， 并 传 text 参数 ， 这 个 


则 说 明 整 个 temp1ate 解析 完毕 了 ， 把 剩余 的 htm1l 都 赋值 


回调 本 数 的 作用 稍 后 我 会 详细 介绍 。 


因此 ， 在 循环 解析 整个 template 的 过 程 中 ， 会 根据 不 同 的 情况 ， 去 执行 不 同 的 回调 酚 数 ， 下 面 我 们 


来 看 看 这 些 回 调 本 数 的 作用 。 


处 理 开 始 标签 
对 应 伪 代 友 : 


Start (tag，attrs， 
let element = 


Unary) { 
createASTEJement(tag，attrs ) 


processEJLement(eJlement ) 


treeManagement () 


当 解析 到 开始 标签 的 时 候 ， 最 后 会 执行 start 回调 本 数 ， 本 数 主要 就 做 3 件 事情 ， 创 建 AST 元 素 ， 
处 理 AST 元 素 ，AST 树 管理 。 下 面 我 们 来 分 别 来 看 这 几 个 过 程 。 


。 创建 AST 元 素 


// check namespace . 
// inherit parent ns if there is one 
const ns = (currentParent && currentParent .ns) || platformGetTagNamespace(tag) 


// handle IE Svg bug 

/* Istanbul 1Ignore ff */ 

If (IsIE && ns === 'Svg' ) { 
attrs = guardIESVGBug(attrs ) 


Jet element: ASTEJement = createASTE1Lement(tag，attrs，currentParent ) 
If (ns) 
element .ns = ns 


export function createASTEJLement ( 
tag: String， 
attrs: Array<Attr>/ 
parene AsSTELementalEvoIdg 
)iEASTELemenmte 
return 并 
type: 1 工 ， 
tag， 
attrsList: attrs， 
attrsMap: makeAttrsMap(attrs )， 
parent， 
children: [] 


通过 createASTE1Lement 方法 去 创建 一 个 AST 元 素 ， 并 添加 了 namespace。 可 以 看 到 ， 每 一 个 AST 
元 素 就 是 一 个 普通 的 JavaScript 对 象 ， 其 中 ， type 表示 AST 元 素 类 型 ， tag 表示 标签 

名 ， attrsList 表示 属性 列表 ， attrsMap 表示 属性 映射 表 ， parent 表示 父 的 AST 元 

素 ， children 表示 子 AST 元 素 集合 。 


e。 处 理 AST 元 素 


If (IsForbiddenTag(element) && !isServerRendering()) 攻 
element .forbidden = true 
process.env.NODE_ENV !== "production” && warn( 
Templatesshnouldonlyibewresponsiblewfhor mappanogiitnestateitotcher 
LUTESEAVOmdiplacangEtagswrenEsudqesehhiectsnyourtemnpuatesAaisucnmeas 十 
<SAEagIEEHEastheyiwanotcnbegpaised 


// apply pre-transforms 
for (let = 0; 工 < preTransforms,Jlength;， I++) 攻 
element = preTransforms[I](element，options) || element 


If (!inVvPre) 革 
processPre(eJlement ) 
If (element .pre) 

InVvPre = true 


】 
If (platformIsPreTag(element .tag)) 并 


InPre = true 

】} 

II (inVvPre) { 
proceSsSsRawAttrs(element ) 

} else if (!element.processed) 荆 
是 SEiuceucaedmnaecCerves 
processFor(eJlement ) 
processIf(element ) 
processonce(element ) 

// element-scope Stuff 
proceSssEJLement(element，options ) 


首先 是 对 模块 preTransforms 的 调用 ， 其 实 所 有 模块 的 preTransforms 、 transforms 和 
postTransforms 的 定义 都 在 Src/Vplatforms/Vweb/VcompIler/vmodujles 目录 中 ， 这 部 分 我 们 暂时 不 
会 介绍 ， 之 后 会 结合 具体 的 例子 说 。 接 着 关 断 element 是 否 包含 各 种 指令 通 过 processxxx 做 相应 
的 处 理 ， 处 理 的 结果 就 是 扩展 AST 元 素 的 属性 。 这 里 我 并 不 会 一 一 介绍 所 有 的 指令 处 理 ， 而 是 结合 我 
们 当前 的 例子 ， 我 们 来 看 一 下 _ processFor 和 processIf 


exponrt functIionjlprocessEOr (elAsSTELementyEA 
Jet exp 
If ((exp = getAndRemoveAttr(el， 'Vv-for' ))) 
const res = parseFor(exp) 
If (res) { 
extend(el，res) 
} else if (process,env,NODE_ENV !== "production') 攻 
warn( 
“Invalid v-for expression: ${texp)} 


Xpaomeieoms 巧 昌 让 OAdSaSREEE 三 本 (RSRC2SanLO)RSs (全 六 
expomtconstforteraktOnmREE 王 汪 人 GEAANOASIIE 2 人 们 攻 SN 站 二 这 中 7 


const StripParenSsRE = /AN(|I 和 )$/g 
export functaon parseFonr (exp string) 2EOrParseResult 疙 
const InMatch = exp.match(forAliasRE) 
if (!inMatch) return 
const res = 1{} 
res.for = InMatch[2].trim() 
const alias = inMatch[1].trim(),.replace(stripParenSsRE， ' ) 
const IteratorMatch = alias,.match(forIteratorRE) 
If (iteratorMatch) 
res.alias = alias.replace(forIteratorRE， ” ) 
res.Iterator1 = iteratorMatch[I].trim() 
If (iteratorMatch[2]) 1{ 
res.iIterator2 = iteratorMatch[2].trim() 


】 
else | 
res.alias = alias 


4 


return res 


processFor 就 是 从 元 素 中 拿 到 v-for 指令 的 内 容 ， 然 后 分 别 解析 出 
for 、 alias 、 iterator1 、 iterator2 等 属性 的 值 添 加 到 AST 的 元 素 上 。 就 我 们 的 示例 v- 
for="(item,index) in data" 而 言 ， 解 析出 的 的 for 是 data ， alias 是 


item ， iterator1 是 index ， 没 有 iterator2 。 


iuUnmectaonipeocessT(ey) 大作 
const exp = getAndRemoveAttr(el，'Vv-if') 
If (exp) 荆 
el,if = exp 
addIfCondition(el， 攻 
exp: exp， 
block: el 
后 
else 
If (getAndRemoveAttr(el， 'Vv-else') != nul1) 攻 
elL.else = true 
】} 
const elsejif = getAndRemoveAttr(el1，'v-else-if') 
if (elseif) 攻 
el,elselif = elsejf 


export function addIfCcondition (elL: ASTEJLement，condition: ASTIfCondition) 攻 
If (!el.ifCconditions) 攻 
el,.IfCconditions = [] 


el.IfCconditions,push(condition) 


processIf 束 是 从 元 素 中 拿 v-if 指令 的 内 容 ， 如 果 拿 到 则 给 AST 元 素 添 加 if 属性 和 
ifConditions 属性 ; 否则 党 试 拿 v-else 指令 及 v-else-if 指令 的 内 容 ， 如 果 拿 到 则 给 AST 元 
素 分 别 添 加 else 和 elseif 属性 。 


e。 AST 树 管 理 


我 们 在 处 理 开 始 标签 的 时 候 为 每 一 个 标签 创建 了 一 个 AST 元 素 ， 在 不 断 解析 模板 创建 AST 元 素 的 时 
候 ， 我 们 也 要 为 它们 建立 父子 关系 ， 束 像 DOM 元 素 的 父子 关系 那样 。 


AST 树 管理 相关 代码 如 下 : 
function checkRootConstraints (el) { 
If (process.env.NODE_ENV !== "production' ) { 
If (el.tag === 'Slot' || el.tag === "tempJlate') { 
warnonce( 


Cannot Use <${tel.tag}> as component root element because It may ”上 + 


COnEannimultaipenoqesa 


】} 
If (el.attrsMap .hasOownProperty(' v-for' )) 
warnonce( 
"Cannot Use Vv-for on Statefu] component root element because "+ 
enmduersanuutcapleneliementsa 
) 
】} 


// tree management 
If (!root) 
root = element 
CheckRootConstraints(root ) 
} else if (!stack. length) 荆 
// allow root elements with vV-If，V-else-if and vV-else 
If (root.if && (element .elsejif || element.else)) 
checkRootConstraints(element ) 
addIfCcondition(root，({ 
exp: element .elJsejif， 
block: element 


了 ) 
} else if (process.env,NODE_ENV !== "production') 
warnonce( 
“Component tempJlate Should contain exact]ly one root element ， ”+ 


If you are using v=-Iif on multiple elements， ”上 + 
LUsevselsesfutcowchnarnithnemanstead 


】} 


If (currentParent && !element .forbidden) 六 
If (element .elseif || element.else) { 


processIfConditions(eJement，currentParent ) 
} else if (element.SlotScope) { // scoped Slot 
currentParent .plain = false 
const name = element ,SlotTarget || default”' 
; (currentParent .scopedSlots || (currentParent ,scopedSlots = fi))[name] = elemen 


helse 
currentParent ,children.push(element ) 
element .parent = currentParent 


】} 

If (unary) { 
currentParent = element 
Stack.push(eJlement ) 

hh else { 
CloseElement(eJlement ) 


AST 树 管 理 的 目标 是 构建 一 颗 AST 树 ， 本 质 上 它 要 维护 root 根 节 点 和 当前 父 节 点 
currentParent 。 为 了 保证 元 素 可 以 正确 闭合 ， 这 里 也 利用 了 stack 栈 的 数据 结构 ， 和 我 们 之 前 解 
析 模 板 时 用 到 的 stack 类 似 。 


当 我 们 在 处 理 开 始 标签 的 时 候 ， 判 断 如 果 有 currentpParent ， 会 把 当前 AST 元 素 push 到 
currentParent ,chilldren 中 ， 同 时 把 AST 元 素 的 parent 指向 currentParent 。 


接着 就 是 更 新 _ currentParent 和 stack ， 判 断 当 前 如 果 不 是 一 个 一 元 标签 ， 我 们 要 把 它 生 成 的 
AST 元 素 push 到 stack 中 ， 并 且 把 当前 的 AST 元 素 赋 值 给 currentParent 。 


Stack 和 currentParent 除了 在 处 理 开 始 标签 的 时 候 会 变化 ， 在 处 理 闭 合 标签 的 时 候 也 会 变化 ， 
因此 整个 AST 树 管理 要 结合 闭合 标签 的 处 理 逻 辑 看。 


处 理财 合 标签 
对 应 伪 代 友 : 


end () 【 


treeManagement () 
CloseEJlement () 


当 解 析 到 闭合 标签 的 时 候 ， 最 后 会 执行 end 回调 画 数 : 


// remove trailing whitespace 

const element = Stack[stack.Jlength - 工 ] 

const JastNode = element ,children[element.children.Jlength - 工 ] 

If (lastNode && lastNode,type === 3 && lastNode .text === '” '，&& !inPre) 攻 
element .children.pop() 

】} 


// pop Stack 


Stack.Jength -= 工 
currentParent = Stack[stack.length - 1] 
CloseElement(element ) 


首先 处 理 了 尾部 空格 的 情况 ， 然 后 把 stack 的 元 素 弹 一 个 出 栈 ， 并 把 stack 最 后 一 个 元 素 赋值 给 
currentParent ， 这 样 就 保证 了 当 遇 到 闭合 标签 的 时 候 ， 可 以 正确 地 更 新 _ stack 的 长 度 以 及 
currentParent 的 值 ， 这 样 束 维护 了 整个 AST 树 。 


最 后 执行 了 closeElement(elment) 


function clLloseElLement (elLement ) 六 

// check pre State 

If (element ,pre) { 
InvVPre = false 

} 

If (plLatformISsPreTag(element .tag)) 攻 
InPre = false 

】} 

// apply post-transforms 

for (let IL = 0; 工 < postTransforms.Jength; i++) 荆 
postTransforms[I](element，options ) 


closeElement 逻辑 很 简单 ， 就 是 更 新 一 下 _ invPre 和 inpPre 的 状态 ， 以 及 执行 
postTransforms 本 数 ， 这 些 我 们 暂时 都 不 必 了 解 。 


处 理 文本 内 容 
对 应 伪 代 友 : 


chars (text: String) { 
handleText() 
createchildrenASTOfText( ) 


除了 处 理 开始 标签 和 闭合 标签 ， 我 们 还 会 在 解析 模板 的 过 程 中 去 处 理 一 些 文本 内 容 : 


const children = currentParent ,children 
text = inPre || text.trim() 
? ISTextTag(currentParent) ? text : decodeHTMLCached(text ) 
// only preserve whitespace if its not right after a starting tag 
: preservewWhitespace && children. length ?3 ”0 
工人 (text) 二 
Jetunres 
If (!inVPre && text !== '” ，&& (res = parseText(text，delimiters))) 攻 
children.push({ 
type: 2， 


expresslion: res.expression， 
tokens: res,tokens， 
ex 下 
了]) 
} else if (text !== ”| 5children,length || children[children. LIength - 工 ,text 
IE 
children.push({ 
type: 3， 
七 eXt 
现 


文本 构造 的 AST 元 素 有 2 种 类 型 ， 一 种 是 有 表达 式 的 ， type 为 2， 一 种 是 纯 文 本 ， type 为 3。 在 
我 们 的 例子 中 ， 文 本 就 是 {f{fitem}}y:{f{tindex}}y ， 是 个 表达 式 ， 通 过 执行 parseText(text， 
delimiters) 对 文本 解析 ， 它 的 定义 在 src/compiler/parser/text-parsre.js 中 : 


const defauJltTagRE = 作 { 人 NA{((?:.|Xn)+?)\}}Zg 
const regexEscapeRE = /[-.*+?3A^A$ 人 1()1[]NMAANX]Zg 


const buildRegex = cached(delimiters => { 
const open = delimiters[0].replace(regexESscapeRE， ' \\$&  ) 
const close = delimiters[1].replace(regexESscapeRE， "'\\$& ' ) 
FeunanewaRegEXxDopemeEitte2 salNNP) 二 2) 证 二 十 closenangiy 


}) 


export function parseText (人 
LeExtostcrcanogy 
delimiters?: [string strzng| 
JUextEarseResu tcl 攻 VOomd 下 上 
const tagRE = delimiters ? buildRegex(delimiters) : defaultTagRE 
If (!tagRE.test(text)) 攻 
return 
】} 
const tokens = [] 
const rawTokens = [] 
let lastIndex = tagRE.JastIndex = 0 
Jet match，jindex，tokenVvalue 
while ((match = tagRE.exec(text))) 并 
Index = match.Index 
// push text token 
If (index > LastIndex) 六 
rawTokens ,push(tokenValue = text.SlLice(lastIndex，index)) 
tokens.push(JSON.stringify(tokenValue) ) 
】} 
// tag token 
const exp = parseFilters(match[1].trim()) 
tokens,push( _sS($ftexp}) ) 
rawTokens ,push({ 'Qbinding'": exp }) 
JastIndex = index + match[90].Jength 


} 
If (lastIndex < text,.Jength) 革 
rawTokens ,push(tokenValue = text.Slice(LastIndex)) 
tokens.push(JSON,.stringify(tokenVvValue) ) 
} 
Fetunmn 攻 
expression: tokens,. join( '+')， 
tokens: rawTokens 


parseText 首先 根据 分 隔 符 〈 默 认 是 {{}} ) 构造 了 文本 匹配 的 正则 表达 式 ， 然 后 再 循环 匹配 文 
本 ， 遇 到 普通 文本 就 push 到 rawTokens 和 tokens 中 ， 如 果 是 表达 式 就 转换 成 _s($fexp}) push 
到 tokens 中 ， 以 及 转换 成 {f@binding:expy push 到 rawTokens 中 。 


对 于 我 们 的 例子 {{fitem}}:{f{findexy}y ， tokens 就 是 
[_s(item)，'":"'，，Ss(index)] ， rawTokens 就 是 [{@binding :item' 


frebinding':'index' 了 ] 。 那 么 返回 的 对 象 如 下 : 


return 攻 

expbressoneasskcemjraio +ES(ndexyie 

tokens: [tobinding' :item'} :ft aeobinding'": index')] 
】} 


流程 图 
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总 结 
那么 至 此 ， parse 的 过 程 就 分 析 完 了 ， 看 似 复杂 ， 但 我 们 可 以 抛 开 细 理 清 它 的 整体 流程 。 parse 
的 目标 是 把 template 模板 字符 串 转 换 成 AST 树 ， 它 是 一 种 用 JavaScript 对 象 的 形式 来 描述 整个 模 
板 。 那 么 整个 parse 的 过 程 是 利用 正则 表达 式 顺 序 解析 模板 ， 当 解析 到 开始 标签 、 闭 合 标签 、 文 本 
的 时 候 都 会 分 别 执行 对 应 的 回调 本 数 ， 来 达到 构造 AST 树 的 目的 。 

AST 元 素 节 点 总 共有 3 种 类 型 ， type 为 1 表示 是 普通 元 素 ， 为 2 表示 是 表达 式 ， 为 3 表示 是 纯 文 
本 。 其 实 这 里 我 觉得 源码 写 的 不 够 友好 ， 这 种 是 典型 的 魔术 数字 ， 如 果 转 换 成 用 常量 表达 会 更 利于 源 
码 阅读 。 


当 AST 树 构造 完毕 ， 下 一 步 就 是 optimize 优化 这 颗 树 。 


< YY parseStartTag handleStartTag createASTElement 


optimilze 


当 我 们 的 模板 template 经 过 parse 过 程 后 ， 会 输出 生成 AST 树 ， 那 么 接 下 来 我 们 需要 对 这 颗 树 
做 优化 ， optimize 的 逻辑 是 远 简 单 于 parse 的 逻辑 ， 所 以 理解 起 来 会 轻松 很 多 。 


为 什么 要 有 优化 过 程 ， 因 为 我 们 知道 Vue 是 数据 驱动 ， 是 响应 式 的 ， 但 是 我 们 的 模板 并 不 是 所 有 数据 
都 是 响应 式 的 ， 也 有 很 多 数据 是 首次 泻 染 后 就 永远 不 会 变化 的 ， 那 么 这 部 分 数据 生成 的 DOM 也 不 会 变 
化 ， 我 们 可 以 在 _patch 的 过 程 跳 过 对 他 们 的 比 对 。 


来 看 一 下 _ optimize 方法 的 定义 ， 在 src/compiler/optimizer.js 中 : 


人 
* Goal of the optimizer: walk the generated template AST tree 
* and detect sub-trees that are purely static，1i,e， parts of 
* the DOM that never needs to change.， 


* Once we detect these Sub-trees，we can: 


* 工 ， Hoist them into constants，So that we no longer need to 
世 Create fresh nodes for them on each re-render ， 
* 2，Completely skip them in the patching process , 
2 

export tunctIonioptanazenoot 2ASTETLememt optaionms comoaler0pt10nsy 
if (!root) return 
IISStaticKey = genStaticKkeySsCached(options.staticKkeys || ”) 
ISPJatformReservedTag = options,1IsReservedTag || no 
// first pass: mark all non-static nodes ， 
markStatic(root) 
// Second pass: mark static roots ， 
markStaticRoots(root，Talse) 


functionugenstatacKeys(keysc stringhjEunctaoneEt 
return makeMap( 
IEyYDeREagFattrsistsaktersMappLannaparenmcnchnaldqcenattrs 
(Keyseca Keys an) 


我 们 在 编译 阶段 可 以 把 一 些 AST 节点 优化 成 静态 节点 ， 所 以 整个 optimize 的 过 程 实际 上 就 干 2 件 
事情 ， markstatic(root) 标记 静态 节点 ， markstaticRoots(root，false) 标记 静态 根 。 


标记 静态 节点 


function markStatic (node: ASTNode) 
node,Sstatic = isStatic(node) 


If (node.type === 1) 革 
// do not make component Slot content Static. this avoids 
// 1， components not able to mutate Slot nodes 
// 2，static Slot content falls for hot-reloading 
UP 
!ISPlLatformReservedTag(node ,tag) && 
node.tag !== "Slot' && 
node.attrsMap[' inline-template '] == nul1 
人 
etunn 
} 
for (let 工 = 0， 1 = node.children,.Jlength; 工 < i++) 
const child = node.children[i] 
markStatic(child) 
if (!child.static) 革 
node.static = false 


】} 
if (node.iIifCconditions) { 
for (let TIL = 1 1L = node.ifconditions.length; 工 < 工 I++) 六 
const block = node,.ifconditions[I],block 
markStatic(block ) 
If (!block.static) { 
node.static = false 


function IsStatic (node: ASTNode): boolean 攻 

if (node.type === 2) { // expression 
return false 

】} 

If (node.type === 3) { // text 
IEeEUGREEEIUR 

】} 

return !!(Cnode.pre || (人 
!node.hasBindings && // no dynamic bindings 
!node,if && !node.for && // not v-if or v-for or V-else 
!ISBuIiltInTag(node.tag) && // not a buIlt-In 
ISPJatformReservedTag(node .tag) && // not a component 
!ISDirectChildofTemp1LateFor(node) && 
0bject,.keys(node).every(IisStaticKey ) 


) ) 


首先 执行 node.static = isStatic(node) 


isstatic 是 对 一 个 AST 元 素 节点 是 否 是 静态 的 判断 ， 如 果 是 表达 式 ， 就 是 非 静态 ; 如 果 是 纯 文本 ， 
就 是 静态 ; 对 于 一 个 普通 元 素 ， 如 果 有 pre 属性 ， 那 么 它 使 用 了 v-pre 指令 ， 是 静态 ， 否 则 要 同时 
满足 以 下 条 件 : 没有 使 用 v-if 、 v-for ， 没 有 使 用 其 它 指 邻 〈 不 包括 v-once ) ， 非 内 置 组 件 ， 
是 平台 保留 的 标签 ， 非 带 有 v-for 的 template 标签 的 直接 子 节 点 ， 节 点 的 所 有 属性 的 key 都 满 
足 静 态 key ; 这 些 都 满足 则 这 个 AST 节点 是 一 个 静态 节点 。 


如 果 这 个 节点 是 一 个 普通 元 素 ， 则 逼 历 它 的 所 有 children ， 递 娄 执 行 markstatic 。 因 为 所 有 的 
elseif 和 else 节点 都 不 在 children 中 ， 如 果 节 点 的 ifconditions 不 为 空 ， 则 逼 历 
ifconditions 拿 到 所 有 条 件 中 的 block ， 也 就 是 它们 对 应 的 AST 节点 ， 递 娄 执 行 

markStatic 。 在 这 些 递归 过 程 中 ， 一 日 子 节点 有 不 是 static 的 情况 ， 则 它 的 父 节 点 的 static 
均 变 成 false。 


标记 静态 根 


function markStaticRoots (node: ASTNode，iSsInFor: boolean) { 
If (node.type === 1) 革 
If (node.static || node.once) 攻 
node.SstaticInFor = IsSInFor 
】} 
// For a node to qualify as a _ Static root，it should have children that 
// are not just static text， otherwise the cost of hoisting out wil1 
// outweigh the benefits and it's better off to just always render it fresh , 
If (node.static && node.children. length && !( 


node.children.length === 1 && 
node.children[0].type === 
王八 
node.SstaticRoot = true 
return 
hh else { 
node.SstaticRoot = false 


】 
If (node.children) 攻 
for (let 工 = 0， 1 = node.children,Jlength; 工 < 1 I++) 六 
markStaticRoots(node.children[I]，isInFor || !!node.for) 


】} 
If (node.ifCconditions) 攻 
for (let TIL = 1 1L= node.ifconditions. length; 工 < I++) 六 
markStaticRoots(node.ifCconditions[I].block，isInFor) 


markStaticRoots 第 二 个 参数 是 isInFor ， 对 于 已 经 是 _ static 的 节点 或 者 是 _v-once 指令 的 
节点 ， node.staticInFor = isInFor 。 接着 就 是 对 于 staticRoot 的 判断 逻辑 ， 从 注释 中 我 们 可 
以 看 到 ， 对 于 有 资格 成 为 staticRoot 的 节点 ， 除 了 本 身 是 一 个 静态 节点 外 ， 必 须 满足 拥有 


optimijze 


children ， 并 且 children 不 能 只 是 一 个 文本 节点 ， 不 然 的 话 把 它 标记 成 静态 根 节点 的 收益 就 很 小 


了 。 


接 下 来 和 标记 静态 节点 的 逻辑 一 样 ， 表 历 children 以 及 ifconditions ， 递 归 执 


markStatiIcRoots 。 


回 轨 我 们 之 前 的 例子 ， 经 过 optimize 后 ，AST 树 变 成 了 如 下 : 


ast = 攻 
EVIDe ES 
用 OEEIUILS 
ESSIETS ae U 区 
EtsMapE 二 


下 SSSobaneCSn 
GaSSOEELNLSE 
EVENSShOW' 

】 

ESSIOWEE 


ECondnonmsie IE 
“exp sshow 
,Dllock2U astwueLlenment 
}]， 
panenmteunmdetanmed 
门下 SEEGiSe 
EstatecEClassonns 避 光 
ELassBaundangi bndecls 
"Static' : false， 
StaticRoot ': false， 
“cnaldren [tt 
EDGE 
Eagle 
EGRIESTS 人 
name': 'Q@click '， 
Valuesasclncktemandeyx 直 
j]， 
act2sManp 人 


OOcClackonclnrokrneem 人 ndexDe 


Voicemsnuexh EnEadataen 


]， 
DaiEenia 天 UUEaSEEeLTEnmeni 
"plan falsey 
eVem 攻 si 
GaekKen 本 


Valueaclrekkeem 人 ndex 


】 
7 
"hasBindings': true， 
OIC daESs 
"alias': "Item'， 
teratorl andgex 了 
SatiicCo ESaTSe 


体 


SatlcRootc Talse 
Cnaiczeren al 
EVDeE 2 
“expresslion' 2 S(Item)j+22 +s( Index) 
EeeXtea Eeeneanaduexe 
“tokens: 【[ 
他 QbrndangwaEemy 
{'Q@binding' :index'} 
]， 


"Static' : false 


]] 


我 们 发 现 每 一 个 AST 元 素 节 点 都 多 了 _ staic 属性 ， 并 且 type 为 1 的 普通 元 素 AST 节点 多 了 
staticRoot 属性 。 

总 结 

那么 至 此 我 们 分 析 完 了 optimize 的 过 程 ， 就 是 深度 有 表 历 这 个 AST 树 ， 去 检测 它 的 每 一 颗 子 树 是 不 
是 静态 节点 ， 如 果 是 静态 节点 则 它们 生成 DOM 永远 不 需要 改变 ， 这 对 运行 时 对 模板 的 更 新 起 到 极 大 的 
优化 作用 。 

我 们 通过 optimize 我 们 把 整个 AST 树 中 的 每 一 个 AST 元 素 节 点 标记 了 static 和 

staticRoot ， 它 会 影响 我 们 接 下 来 执行 代码 生成 的 过 程 。 


codegen 


编译 的 最 后 一 步 就 是 把 优化 后 的 AST 树 转换 成 可 执行 的 代码 ， 这 部 分 内 容 也 比较 多 ， 我 并 不 打算 把 所 
有 的 细 交 都 讲 了 ， 了 解 整体 流程 即 可 。 部 分 细节 我 们 会 在 之 后 的 章节 配合 一 个 具体 case 去 详细 讲 。 


为 了 方便 理解 ， 我 们 还 是 用 之 前 的 例子 : 


<UJ1 :clJass="bindCcls"”class="1ist”VvV-If="isShow"> 

<]11 v-for="(item, index) in data"”@c1lick="clickItem(Iindex)">{{titem}y:{t{tindex}y}y</ 
下 1 之 
</UJ> 


它 经 过 编译 ， 执 行 const code = generate(ast，options) ， 生 成 的 render 代码 果 如 下 : 


with(this ){ 
return (IsShow) ? 
CU 下 
StaticClLass: "11ist"， 
Class: bindCcls 
】 
_1((data)，Tfunction(Item，index) { 
returnsc( 1 二 
on: 并 
"click": function($event ) 
ClickItem(Index) 


】} 
]， 


[Lv(_s(itemn) + ":" + _SsS(index))]) 
]) 
) : -el() 


这 里 的 _c 画 数 定义 在 Src/core/instance/vrender ,js 中 。 


vm, CCcC = (a，b，c，d) => createEJlement(vm，a，b，c，d，false) 


而 1、 _v 定义 在 src/core/instance/render-helpers/index.js 中 : 


export functaion anstallRenderHelpers (target: any)) 1 
target, 0 = markonce 


target,_n = toNumber 
target, ss = toString 
target, 1 = renderList 
target,., t = renderS1lot 


target, q = LooseEqual 


target, II = LooseIndexoOf 
target., m = renderStatiIc 
target, 和 = resolveFIlter 
target.,_k = checkKkKeyCcodes 
target._b = bindobjectProps 
target.,_v = createTextVNode 
target. e = createEmptyVNode 
target,.,_U = resolveScopedSlots 
target, g = bindobjectListeners 


顾名思义 ， _c 就 是 执行 createElement 去 创建 VNode， 而 1 对 应 renderList 浑 染 列 
表 ; _v 对 应 _ createTextVNode 创建 文本 VNode ; _e 对 于 _ createEmptyVNode 创建 至 的 
VNode。 


在 compileToFunctions 中 ， 会 把 这 个 render 代码 串 转 换 成 本 数 ， 它 的 定义 在 


src/compler/to-function.js 中 : 


const compiled = compile(tempJate，options ) 
res,render = createFunction(compiled.render，TfnGenErrors ) 


function createFunction (code，errors) { 


yy 
return new Function(code ) 
Tcatccntenrn)EEA 
errors.push({t err，code }) 
return noop 


实际 上 就 是 把 render 代码 串通 过 new Function 的 方式 转换 成 可 执行 的 函数 ， 赋 值 给 
vm.options.render ， 这 样 当 组 件 通过 vm._render 的 时 候 ， 就 会 执行 这 个 render 画 数 。 那 么 
接 下 来 我 们 就 重点 关注 一 下 这 个 render 代码 串 的 生成 过 程 。 


generate 


const code = generate(ast，options ) 


generate 函数 的 定义 在 Src/vcompiler/vcodegen/index,js 中 : 


export function generate (人 
ast: ASTEJement | void， 
options: Compileroptions 
): CodegenResu]lt 苹 
const State = new CodegenState(options ) 
const code = ast ? genE1Lement(ast，Sstate) : ' cl("div") 
returnm 六 


render: with(this){return $ftcode}+} ， 
StaticRenderFns: state.statIcRenderFns 


generate 画 数 首先 通过 genELement(ast，state) 生成 code ， 再 把 code 用 with(this) 
{freturn $fcode}}} 包 于 起 来 。 这 里 的 state 是 codegenstate 的 一 个 实例 ， 稍 后 我 们 在 用 到 和 它 
的 时 候 会 介绍 它 。 先 来 看 一 下 _ genElement 


export function genELement (es ASTELement states Codegenstatej strzngl 
If (el.staticRoot && !el.staticProcessed) { 
return genStatic(e1，Sstate) 
} else if (el.once && !el.onceProcessed) { 
return genonce(e1，state ) 
} else if (el.for && !el.forProcessed) 并 
return genFor(elL，Sstate) 
} else if (el.if && !el.ifProcessed) 并 
return genIf(el1，state) 


} else if (el,tag === "template && !el.SslotTarget) 革 
return genCchildren(e1L，Sstate) || "void 90， 

} else if (el,tag === "Slot') 六 
return genSlot(e1，state) 

helse { 


// component or element 
Jet code 
If (el.component ) 
code = genCcomponent(el.component，el，state) 
Telse it 
const data = el.plain ? undefined : genData(e1，Sstate) 


const children = el.inlineTempJlate ? null1 : genCchildren(e1L，state，true) 
Codes= Esc teltagh 


UaicaE2 StauacahnE XUOatal 
】${ 

Gaiidhaerme2 ai 中 Choice 人 可 dj 这 em 
六 


j 


// modujle transforms 
OILeEEEI 全 三 下 全 可 < StakeReranskornmsengkn as ) 本 二 
code Estatestransforms iil(e codey 


】} 


return code 


基本 就 是 判断 当前 AST 元 素 节 点 的 属性 执行 不 同 的 代码 生成 画 数 ， 在 我 们 的 例子 中 ， 我 们 先 了 解 一 下 


genFor 和 genIf 。 


genIf 


export function genIf (人 
e]: any， 
State couegensState: 
alLtGen?: Function， 
有 LEEmpty2 sng 
SEO 证 必 
el.ifProcessed = true // avolild recursion 
return genIfConditions(el.iIfCconditions.Slice()，Sstate，altGen，altEmpty) 


function genIfConditions (人 
conditions: ASTIfConditions， 
statencouegenstate: 
alLtGen?: Function， 
alkEmpEy2 ESEnng 


JSETNnOEE 
If (!conditions,. Jength) 荆 
return alLtEmpty || 2 el(): 
】} 


const condition = conditions .shift() 
If (condition.exp) 革 
return  (${tcondition.exp})?${ 
genTernaryExp(condition,.bJlock) 
】:${ 
genIfConditions(conditions，state，altGen，altEmpty ) 
让 
Jelse 
return “${tgenTernaryExp(condition.block)}- 


// v-if with v-once Shou1ld generate code 1Like (a)?_m(0):_m(1I) 
unctiondgenTernaryEXpE(Ced) 三 必 
return altGen 
? altGen(el1，state) 
: el,once 
? genonce(el，state) 
: genElLement(e1，Sstate) 


genIf 主要 是 通过 执行 genIfconditions ， 它 是 依次 从 conditions 获取 第 一 个 condition ， 
然后 通过 对 _ condition.exp 去 生成 一 段 三 元 运算 符 的 代码 ， : 后 是 递 娄 调用 

genIfCconditions ， 这 样 如 果 有 多 个 conditions ， 就 生成 多 层 三 元 运算 逻辑 。 这 里 我 们 暂时 不 考 
虐 v-once 的 情况 ， 所 以 genTernaryExp 最 终 是 调用 了 genELement 。 


在 我 们 的 例子 中 ， 只 有 一 个 condition ， exp 为 isshow ， 因 此 生成 如 下 伪 代 码 : 


return (IsShow) ? genEJLement(elL，Sstate) : _el() 


genFor 


export function genFor (人 
Eeeany 
state: CodegenState， 
alLtGen?: Function， 
altHelper22strang 
SO 和 
const exp = el.for 
const alias = el.alias 
Const Iterator1l = el iteratorl ?2 )$iel iteratorly 
Const Iterator2 = el.iterator2 ?3  ，$fte1.iterator2} ” : 


If (process.env.NODE_ENV !== ' production”&& 
state.maybeCcomponent(el) && 
el,tag !== ' Slot && 
el,tag !== "template”&& 
!e1. key 
JE 
State.warn( 
`“<${el.tag}y v-for="${falias} in ${fexp}y">: component lists rendered with ”+ 
`V=for should have explicit keys. 上 
LSeeinetps: 2vueJsworgLgunrde 和 nstentmlzkeyafrorminoenhoa 
EGRESDs 


el,forProcessed = true // avoid recursion 
etcunnai 中 farNeuperalRGKEeXp)R Et 
function($talias}$diterator1l}$titerator2}){( 十 
IIekunnE 中 (acenal 几 genEuementiCem sacec) 有 内 二 


3 辣 计 


genFor 的 逻 辑 很 简单 ， 首 先 AST 元 素 节 点 中 获取 了 和 for 相关 的 一 些 属 性 ， 然 后 返回 了 一 个 代码 
字符 串 。 


在 我 们 的 例子 中 ， exp 是 data ， alias 是 item ， iterator1 ， 因 此 生成 如 下 伪 代 码 : 


_1((data)，function(item，index) 区 
return genEJLememt(e1，Sstate) 


了]) 


genData A 贸 genchildren 


再 次 回顾 我 们 的 例子 ， 它 的 最 外 层 是 ul ， 首 先 执行 genIf ， 它 最 终 调用 了 genELement(el， 
state) 去 生成 子 节 点 ， 注 意 ， 这 里 的 el 仍然 指向 的 是 ul 对 应 的 AST 节 点， 但 是 此 时 的 
el.ifprocessed 为 true， 所 以 命中 最 后 一 个 else 逻辑 : 


// component or element 
Jet code 
If (el.component ) 并 
code = genCcomponent(el,component，el，state ) 
helse 1 
const data = el,.plain ? undefined : genData(elL，Sstate) 


const children = el.inlineTemplate ?2 nul1l : genChildren(el，Sstate，true) 
Codes= sc telstagh 人 


dataezshtdata en AUaEaS 
】${ 
Cnandrene2 chladrem acnaaarehn 


]) 

】} 

// module transforms 

for leE En 三 O) 亲 三 二 statentranmsfornsesuengnR TH) 开 必 
code statetransformsllal(elucodey) 


return code 


这 里 我 们 只 关注 2 个 逻辑 ， genpata 和 genchildren 


e genData 


export function genData (el: ASTELement，state: CodegenState): string 六 
let data = 人 


发 征 aectVyes 玫 airstke 

// directives may mutate the el's other properties before they are generated ,， 
const dirs = genDirectives(el，Sstate) 

if (dirs) data += dirs + 


// key 
if (el.key) { 
data += “key:$fel.key}， 
} 
AR 
二 人 GETEEr 于 
data += ref:$tel,ref}， 
} 
if (el,refInFor) { 
data += refInFor:true，, 
】} 
允 是 De 
if (el.pre) { 


codegen 


data += pre:true, 
} 
// record original tag name for components Using "is"” attribute 
If (el,component ) 于 
data += tag $ftel.taglj 
} 
// module data generation functions 
for (let IL = 0; 工 < state.dataGenFns.Llength; I++) 攻 
data += state.dataGenFns[I](el) 
} 
全 aeEIaibues 
If (el,attrs) 半 
data += attrs:{$tgenProps(el,attrs)}}， 
} 
// DOM props 
If (el.props) 攻 
data += “domProps:{${fgenProps(el.props)}}， 
} 
// event handlers 
If (el.events) 革 
data += “ $tgenHandlers(el,eventSs，Tfalse，Sstate.warn)},， 
】} 
If (el,nativeEventSs) { 
data += “ $tgenHandlers(el,nativeEVventSs，true，Sstate,warn)},， 
} 
故 重 sotatkarge 
// only for non-scoped Slots 
If (el.SlotTarget && !el,.SlotScope) 
Uatagrs isloetelsslotranrgety) 
】} 
// Scoped Slots 
If (el.scopedSlots) { 
data +=  “ ${tgenScopedSlots(el.scopedSlots，Sstate)},， 
】} 
// component VvV-model1 
If (el.modeJ) 攻 
data += “model:{value:${ 
el.mode1.value 
}，callback:${ 
el.mode1.cal1lback 
} ,expression: 和 { 
el.mode1.expression 
| 二: 辐 
】} 
// inline-template 
If (el,.inlineTemplate) { 
const inlineTempJlate = genIn1lineTemplate(elLl，Sstate) 
If (inJlineTempJlate) { 
data +=  ${tinlineTempJlate}， 


记 
请 
广 


data = data.replace(/ 书 /，” ) + 儿 
// v-bind data wrap 
If (el,.wrapData) { 
data = el,.wrapData(datal) 
} 
// vV-on data wrap 
If (el.wrapListeners) { 
data = el.wrapListeners(data) 


H 


return data 


genData 画 数 就 是 根据 AST 元 素 节 点 的 属性 构造 出 一 个 data 对 象 字 符 串 ， 这 个 在 后 面 创建 
VNode 的 时 候 的 时 候 会 作为 参数 传人 。 


之 前 我 们 提 到 了 codegenstate 的 实例 state ， 这 里 有 一 段 关 于 state 的 逻辑 : 


for (let TIL =0; 工 < state.dataGenFns. Length; I++) 攻 
data += State,.dataGenFns[I](el) 


state.dataGenFns 的 初始 化 在 它 的 构造 器 中 。 


export class codegensSstate ({ 
constructor (options: CompIileroptions) 区 
[OA 
this.dataGenFns = pluckModuJleFunction(options .modules， "genData ' ) 
汐 0 


实际 上 就 是 获取 所 有 modules 中 的 genData 本 数 ， 其 中 ， class module 和 style module 定 
义 了 genData 本 数 。 比 如 定义 在 Src/Vplatforms/VwebVycompiIlerVmodules/cJlass.,js 中 的 
genData 方法 : 


function genData (el: ASTE]lement): string 攻 
let data = 
If (el.statIicClass) 革 
data += StaticClass:$f{tel.staticClass},， 
】 
If (el.classBinding) 六 
data += “Class:$fel.classBinding}， 


return data 


在 我 们 的 例子 中 ， ul _ AST 元 素 节 点 定义 了 _ el,staticclass 和 el.classBinding ， 因 此 最 终生 
成 的 data 字符 串 如 下 : 


StaticClass: "11ist"， 
class: bindCcls 


e genChildren 


接 下 来 我 们 再 来 看 一 下 _ genchildren ， 它 的 定义 在 src/compiler/codegen/index.js 中 : 


export function genChildren (人 
el1: ASTElLement， 
stacenncouegenstate:， 
checkSkip?: boolean， 
altoenElLement2 Functaon， 
altGenNode?: Function 

)SErmnng 司 |EVOmd 攻 全 
const children = el.children 
if (children,. length) 攻 

const el: any = children[9] 


If (children. length === 1 && 

el,for && 

el.tag !== "template' && 

el,tag !== "Slot' 
证 

return (altGenEJLement || genEJement)(el，Sstate ) 
} 


const normalizationType = checkSkip 
? getNormalizationType(children，state.maybeCcomponent ) 
| 

const gen = altGenNode || genNode 

eturmailiSd4echnaldicenemapike 三 三 gem0cns skake) 朋 让 及 证 中古 
nornmalazatclonrypee 2 tnormalazataroniypDpe 


在 我 们 的 例子 中 ， 1i AST 元素 节点 是 ul AST 元 素 节 点 的 children 之 一 ， 满 足 
(children.length === 1 && el.for && el,tag !== 'template' && el.tag !== "Slot ') 条 
件 ， 因 此 通过 genElement(eLl，state) 生成 11 AST 元 素 节 点 的 代码 ， 也 就 回 到 了 我 们 之 前 调用 
genFor 生成 的 代码 ， 把 它们 拼 在 一 起 生成 的 伪 代 码 如 下 : 


return (IsShow) ? 
CU 
StaticClass: "1LiSst7"， 
class: bindCcls 


] 
_1((data)，function(item，index) { 
return genE1Lememt(el，Sstate) 
】) 
) 2 


在 我 们 的 例子 中 ， 在 执行 genELememt(el，state) 的 时 候 ， el 还 是 11 AST 元素 节 
点 ， el.forProcessed 已 为 true， 所 以 会 继续 执行 genData 和 genchildren 的 逻辑 。 由 于 
el,events 不 为 实 ， 在 执行 genData 的 时 候 ， 会 执行 如 下 逻 辑 : 


If (el,events) 
data += “ ${tgenHandlers(el.events，false，Sstate.warn)}， 


genHandlers 的 定义 在 src/compiler/ycodegen/events ,js 中 : 


export function genHandlers ( 
events: ASTE1LementHand1Jlers， 
ISNative: boolean,， 
warn: Function 
站 strang 旺 《 
let res = IsSNative ?3 nativeon:{' : on:{ 
for (const name in events) 
res +=  "${tname}"”:${genHandler(name，events[name])}， 


Petunnessslace(O 全 下 上 辣 全 


genHandler 的 逻辑 就 不 介绍 了 ， 很 大 部 分 都 是 对 修饰 符 modifier 的 处 理 ， 感 兴趣 同学 可 以 自己 
看 ， 对 于 我 们 的 例子 ， 它 最 终 genpata 生成 的 data 字符 串 如 下 : 


on: 攻 
click ftunctIonm($event) id 
ClickItem(index) 
} 
】} 
】 


genchildren 的 时 候 ， 会 执行 到 如 下 逻辑 : 


export function genCchildren (人 
El: ASTELement， 
state: CodegenState， 
Cneckskap2 boolean， 
altGenE1Lement?2: Function， 
altcenNode?: Eunction 


JSsternng 则 IEVOond 开 人 

/AhA 

const normalizationType = checkSkip 
? getNormalizationType(children，state.maybecomponent ) 
0 

const gen = altGenNode || genNode 

return [1$tchnrildrensnmap(c => gen(c state))join( )]${ 
normalizationType ?2 7v$fnormalizatIionType} 4 


二 
】} 
function genNode (node: ASTNode，state: CodegenState): String 攻 
If (node.type === 1) 革 
return genEJLement(node，Sstate) 
} if (node.type === 3 && node.IsComment ) { 
return genCcomment (node ) 
} else { 


return genText(node ) 


genchildren 的 就 是 青 历 children ， 然 后 执行 genNode 方法 ， 根 据 不 同 的 type 执行 具体 的 
方法 。 在 我 们 的 例子 中 ， 1i1 AST 元 素 节 点 的 children 是 type 为 2 的 表达 式 AST 元 素 节 点 ， 那 么 
会 执行 到 genText(node) 逻辑 。 


expormtefhunctronEogenrexttEexE ASIText 人 EASTEXpFessaonj) Sng 攻 必 
return `”_V(${ttext.type === 2 
?FEextsexpressnon 
”transformSpecialNewlines(JSON.stringify(text.text)) 


J 关 


因此 在 我 们 的 例子 中 ， genchildren 生成 的 代码 串 如 下 : 


[_v(_s(itemn) + ":" + _Ss(index))] 


和 之 前 拼 在 一 起 ， 最 终生 成 的 code 如 下 : 


return (IsShow) ? 
攻 C(UIS 人 
StaticClass: "1IiSst”"， 
Class: bindCcls 
外 
_1L((data)，Tfunction(Item，index) { 
ie CT 
on: 荆 
"click": function($event ) 
clickItem(Iindex) 


】 
[_v(_s(itemn) + ":" + _Ss(index))]) 
了]) 
) : -el() 
总 结 


这 一 节 通 过 例子 配合 解析 ， 我 们 对 从 ast -> code 这 一 步 有 了 一 些 了 解 ， 编 译 后 生成 的 代码 就 是 在 
运行 时 执行 的 代码 。 由 于 gencode 的 内 容 有 很 多 ， 所 以 我 对 大 家 的 建议 是 没 必要 把 所 有 的 细节 都 一 
次 性 看 完 ， 我 们 应 该 根据 具体 一 个 case， 走 完 一 条 主线 即 可 。 


在 之 后 的 章节 我 们 会 对 slot 的 实现 做 解析 ， 我 们 会 重新 复习 编译 的 章节 ， 针 对 具体 问题 做 具体 分 
析 ， 有 利于 我 们 排除 干 扰 ， 对 编译 过 程 的 学 习 有 更 深入 的 理解 。 


扩展 
前 面 几 章 我 们 分 析 了 Vue 的 核心 以 及 编译 过 程 ， 除 此 之 外 ，Vue 还 提供 了 很 多 好 用 的 feature 如 


event 、 v-model 、 slot 、 keep-alive 、 transition 等 等 。 对 他 们 的 理解 有 助 于 我 们 在 平 
时 开发 中 更 好 地 应 用 这 些 feature， 即 使 出 现 bug 我 们 也 可 以 很 从 容 地 应 对 。 


这 一 章 是 一 个 可 扩展 的 章节 ， 除 了 已 分 析 的 这 些 feature 外 ， 未 来 我 们 可 能 会 扩展 更 多 的 内 容 。 


event 


我 们 平时 开发 工作 中 ， 处 理 组 件 间 的 通讯 ， 原 生 的 交互 ， 都 离 不 开 事件 。 对 于 一 个 组 件 元 素 ， 我 们 不 
仪 仪 可 以 绑 定 原生 的 DOM 事件 ， 还 可 以 绑 定 自 定 义 事件 ， 非 常 灵活 和 方便 。 那 么 接 下 来 我 们 从 源码 角 
度 来 看 看 它 的 实现 原理 。 


为 了 更 加 直观 ， 我 们 通过 一 个 例子 来 分 析 它 的 实现 : 


let Child = 
template: "<button @click='"clickHandler($event )"> ”+ 
EeeckKimnenet 
hoTSIEONE 
methods: 攻 
ClickHandJer(e) { 
consoleslogBuEtonECINCKed ee) 
this.$emit(' Select ') 
} 
】} 
】} 


Jet vm = new Vue({ 
el:  "'#app'， 
tempJlate: "<div> ”+ 
"<chlild @select="selectHandJler"”@click,native,prevent="c]lickHandler"></child> ”+ 
Ed 
methods: 攻 
ClickHandJer() 攻 
console .1og( "child clickedl ) 
】 
SeJlectHandler() 革 
consolesloglchndEselecEn yy 
】} 
}， 
Components: { 
Child 
】} 
}) 


编译 


先 从 编译 阶段 开始 看 起 ， 在 parse 阶段 ， 会 执行 processAttrs 方法 ， 它 的 定义 在 


src/compiler/parser/index.js 中 : 


export const onRE = /AQ@|Av-on:/ 
export const dirRE = /VAV-|A^A@I^:/ 
export const bindRE = /VA:|Av-bind:/ 


function procesSsAttrs (el) 六 
const list = el,attrsList 
Jet I，1，name，rawName，Vvalue，modifiers，isProp 
for (LE=0， 1 = 1ist,length; 工 < i++) { 
name = rawName = List[I].name 
value = list[i]l.value 
If (dirRE.test(name)) 六 
el.hasBindings = true 
modifiers = parseModifiers(name ) 
If (modifiers) 六 


name = name,replace(modifierRE， " ) 
} 
If (bindRE.test(name)) 攻 
AAA 
} else If (onRE.test(name)) 革 
name = name.replace(onRE，  ) 
addHandler(elL，name，Vvalue，modifiers，TfTalse，Wwarn) 
Jelse tf 
2 
} 
else 1{ 
// 
】} 


function parseModifiers (name: String): Object | void { 
const match = name.match(modifierRE) 
If (match) 革 
const ret = 全 
match.forEach(m => { ret[m.Slice(1)] = true }) 
[GEUICNUIESE 


在 对 标签 属性 的 处 理 过 程 中 ， 判 断 如 果 是 指令 ， 首 先 通过 parseModifiers 解析 出 修饰 符 ， 然 后 判断 
如 果 事 件 的 指令 ， 则 执行 addHhaddHandler(eLl，name，value，modifiers，false，warn) 方法 ， 它 
的 定义 在 src/compiler/helpers.js 中 : 


export function addHandler (人 
6]: ASTEJIement， 
name: String， 
Value strazng” 
modifiers: ?ASTModifiers， 
Important?: boolean， 
warn?: Function 

JE 
modifiers = modifiers || emptyobJject 
// warn prevent and passive modifier 
SEOULEETOnOGGEEINT 7 


于 人 
process.env.NODE_ENV !== ' production” && warn && 
modifiers.prevent && modifiers.passive 
) 荆 
warn( 
upassveandpreventecanxikabesausedtooetne ai 三 十 
RassIveunandlercanNechnrneventaadefault sevenmts 


// check capture modifier 
If (modifiers,capture) { 
delete modifiers,.capture 
name = '!' + name // mark the event as captured 
} 
If (modifiers,once) 六 
delete modifiers,once 
name = '~' + name // mark the event as once 
} 
/* Istanbul Iignore If “*/ 
If (modifiers,passlive) { 
delete modifiers,.passive 
name = '&' + name // mark the event as passive 


// normalize click.right and click.middle Since they don't actually fire 
// this is technically browser-specific，but at least for now browsers are 
// the only target envs that have right/Zmiddle clLicks.， 
If (name === "click' ) { 
If (modifiers.right) 革 
name = "contextmenu ' 
delete modifiers.right 
} else if (modifiers ,middle) 攻 
name = 'mouseup， 


et events 
If (modifiers ,native) { 
delete modifiers.native 


events = el,nativeEvents || (el,.nativeEvents = {}) 
Telsee 
events = el,events || (el,events = 1{}) 


const newHandler: any = 苹 
Value: value.trim() 

】} 

If (modifiers !== emptyobject) { 
newHandJler.modifiers = modifiers 


const handlers = events[name] 
/* Istanbul Ignore ff */ 
If (Array.isArray(handlers)) 攻 
Important ? handJlers,unshift(newHandler) : handlers.push(newHandJler ) 
} else if (handlers) 
events[name] = important ? [newHandler，handlers] : [handlers，newHandJler] 
Jelse{ 
events[name] = newHandJler 


el.pJlalin = false 


addHandler 本 数 看 起 来 长 ， 实 际 上 就 做 了 3 件 事情 ， 首 先 根据 modifier 修饰 符 对 事件 名 name 
做 处 理 ， 接 着 根据 modifier.native 判断 是 一 个 纯 原 生 事件 还 是 普通 事件 ， 分 别 对 应 
el,nativeEvents 和 el.events ) 最 后 按照 name 对 事件 做 娄 类 ， 并 把 回调 函数 的 字符 串 保 留 到 
对 应 的 事件 中 。 


在 我 们 的 例子 中 ， 父 组 件 的 child 节点 生成 的 el,events 和 el.nativeEvents 如 下 : 


el,events = { 
SeJlect: { 
Value: "SelectHandler 


el,nativeEVvents = 革 
Click: 1{ 
Value: "clickhHandler '， 
modifiers: 攻 
prevent : true 


子 组 件 的 button 节点 生成 的 el,events 如 下 : 


el,events = { 
Click: 1{ 
Value: "clickhHandler($event )， 


然后 在 codegen 的 阶段 ， 会 在 genData 酚 数 中 根据 AST 元素 节点 上 的 events 和 
nativeEvents 生成 data 数据 ， 它 的 定义 在 Src/Vcompiler/vcodegen/index,Jjs 中 : 


export function genData (el: ASTEJLement，Sstate: CodegenState): String 攻 


Jet data = “人 
/Ah 
If (el.events) 
data += “ $tgenHandlers(el,eventSs，Tfalse，Sstate.warn)},， 
} 
If (el,nativeEventSs) 攻 
data += “ ${tgenHandlers(el,nativeEVvents，true，Sstate,.warn)},， 
】} 
沪 
return data 


对 于 这 两 个 属性 ， 会 调用 genHandlers 本 数 ， 定 义 在 src/compiler/codegen/events.js 中 : 


export function genHandlers ( 
events: ASTEJLementHand]lers， 
SNatlive: boolean， 
warn: Function 


JSErng 攻 和 
Let res = IsSNatlive ?2 nativeon:{ on:{ 
for (const name in events) 六 
res +=  "$ftname}":${genHandler(name，events[name])}， 
】} 
etunniirese suncel(0gA 下 


const fnEXpRE = /VANXs*([NXw$_]+| 人 和 (LA)]*?))NXs*=>|AfunctionNXs*N(/ 
ConmstEsampleRakhRE 三 要 CANSD AZz 芋 中 中 [WwW 和 (人 司 EA 过 a 三 过 二 下 咯 [wW 下 ES EN 2 
区 gf 由 祖 部 As 有 az 看 IwW$ ES$/ 
function genHandjler (人 

name: String， 

handler: ASTEJLementHandler | Array<ASTEJLementHand]ler> 
JSETEDOE 

if (!handler) { 

eurnitunmetnonm (AD 


If (Array.IsArray(handler)) 革 
return ` [$thandler.map(handler => genHandJler(name，handler)),. join("，)]] 


const IsSMethodPath = SimplePathRE,.test(handler.value) 
const IsFunctionExpression = fnEXpRE.test(handler.value) 


If (!handler.modifiers) 荆 
If (IsMethodPath || IsFunctionEXxpression) 革 
return handJer .Value 
】} 
RISEanoulgaigtOTe TI 汪 X 
If (WEEX_ _ && handler.params) 革 


return genweexHandJler(handler,.params，handler.value) 
】} 
return ` function($event ){${thandler.value}} ”inline statement 
Jelse 
Jet code = 
Jet genModifiercode = 
const keys = [] 
for (const key in handler.modifiers) 六 
If (modifierCcode[key]) 攻 
genModifiercode += modifiercode[key] 
// leftvright 
If (keyCcodes[key]) 世 
keys,.push(key) 
} else if (key === "exact ') 攻 
const modifiers: ASTModifiers = (handler.modifiers: any) 
genModifierCcode += genGuard( 

[本 CS 二 < 
.filter(keyModifier => !modifiers[keyModifier]) 
.map(keyModifier => “ $event.${tkeyModifier}Key ) 
.join( || ) 

) 
由 elise 二 人 
keys,.push(key ) 


】} 
If (keys,.1length) { 

code += genKkeyFilter(keys) 
】} 
// Make Sure modjifiers 1LIke prevent and stop get executed after key filtering 
If (genModifierCcode) 革 

code += genModifiercode 
】} 
const handlercode = IsMethodPath 

? return $fthandler.value}($event ) 

: 1ISFunctionExpression 

32iiietunn 昌 (中 人 thandenesvVauue 庆 even 
handler .value 

SEEanouUiheODOEGETT 全 全 0 
If (WEEX_ _ && handler.params) 革 

return genweexHandler(handler.params，code + handJlercode) 


】} 
return function($event ){${tcode}$fthandlercode} 


genHandlers 方法 驶 历 事件 对 象 events ， 对 同一 个 事件 名 称 的 事件 调用 genHandler(name， 
events[name] ) 方法 ， 它 的 内 容 看 起 来 多 ， 但 实际 上 逻辑 很 简单 ， 首先 先 判断 如 果 handler 是 一 个 
数组 ， 就 吏 历 它 然后 递归 调用 genHandler 方法 并 拼接 结果 ， 然 后 判断 hanlder,.value 是 一 个 画 


数 的 调用 路 径 还 是 一 个 本 数 表达 式 ， 接着 对 modifiers 做 判断 ， 对 于 没有 modifiers 的 情况 ， 就 
根据 handler.value 不 同情 况 处 理 ， 要 么 直接 返回 ， 要 么 返回 一 个 丁 数 包 右 的 表达 式 ; 对 于 有 
modifiers 的 情况 ， 则 对 各 种 不 同 的 modifer 人 情况 做 不 同 处 理 ， 添 加 相应 的 代码 串 。 


那么 对 于 我 们 的 例子 而 言 ， 父 组 件 生成 的 data 串 为 : 


{ 
on: { "select": SelectHandler}， 
natliveon: {"click": function($event ) { 
$event .preventDefault() ， 
return clickHandler($event ) 
】 
】} 
】} 


子 组 件 生成 的 data 串 为 : 


{ 
on: {"click": function($event) 区 
clickHandJler($event ) 
】} 
】} 
】} 


那么 到 这 里 ， 编 译 部 分 完了 ， 接 下 来 我 们 来 看 一 下 运行 时 部 分 是 如 何 实现 的 。 其 实 Vue 的 事件 有 2 
种 ， 一 种 是 原生 DOM 事件 ， 一 种 是 用 户 自 定 义 事件 ， 我 们 分 别 来 看 。 


DONM 事件 


还 记得 我 们 之 前 在 patch 的 时 候 执行 各 种 module 的 钧 子 范 数 吗 ， 当 时 这 部 分 是 略 过 的 ， 我 们 之 前 
只 分 析 了 DOM 是 如 何 泻 染 的 ， 而 DOM 元 素 相关 的 属性 、 样 式 、 事 件 等 都 是 通过 这 些 module 的 钧 
子 函 数 完成 设置 的 。 

所 有 和 web 相关 的 module 都 定义 在 src/platforms/web/runtime/modules 目录 下 ， 我 们 这 次 只 
关注 目录 下 的 events.js 即 可 。 


在 _ patch 过 程 中 的 创建 阶段 和 更 新 阶段 都 会 执行 updateDOMListeners  : 


let target: any 
function updateDOMListeners (0ldvnode: VNodewithData，vnode: VNodewithData) 攻 
If (isUundef(o1ldvnode.data.on) && isUndef(vnode.data.on)) 六 
return 
】} 
const on = vnode.data.on || 癸 
const oldon = 01ldvnode.data.on || 癸 
target = vnode.elm 
normalizeEvents(on) 
updateListeners(on，oldon，add，remove，YVvnode ,context ) 


target = undefined 


首先 获取 vnode.data.on ， 这 就 是 我 们 之 前 的 生成 的 data 中 对 应 的 事件 对 象 ， target 是 当前 

vnode 对 于 的 DOM 对 象 ， _ normalizeEvents 主要 是 对 v-model 相关 的 处 理 ， 我 们 之 后 分 析 v- 
mode1l 的 时 候 会 介绍 ， 接着 调用 updateListeners(on，oldon，add，remove，vnode .context ) 方 
法 ， 它 的 定义 在 Src/Vcore/vdom/VheJpers/update-1isteners ,js 中 : 


export function updateListeners ( 
on: 0bject， 
oldon: Object， 
add: Function， 
remove: Function， 
vm: Component 
) 5 
Jet name，def，cur，o1d，event 
for (name in on) 六 
def = cur = on[name] 
old = 0Jdon[name] 
event = normalizeEvent(name) 
SEEambu 帮 EnOGEIND 2 
If (WEEX_ _ && isP1lainobject(def)) { 
cur = def,hand]ler 
event .params = def.params 
} 
If (IsUndef(cur)) 
process.env.NODE_ENV !== "production”&& warn( 
“Invalid handler for event "$teventvname} got + String(cur)， 
Vm 
) 
} else if (IsUndef(old)) 攻 
If (isUndef(cur.fns)) { 
cur = on[name] = createFnInvoker(cur) 


】 
add(event ,name，cur，event .once，event ,capture，event ,passlive，event .params ) 
} else if (cur !== 01d) 革 


old.fns = CuUr 
on[name] = 0o1d 


for (name in oldon) 攻 
If (isUundef(on[name])) 芒 
event = normalizeEvent(name ) 
remove(event .name，oldon[name]，event .capture) 


updateListeners 的 逻辑 很 简单 ， 逼 历 on 去 添 加 事件 监听 ， 逼 历 oldon 去 移 除 事件 监听 ， 关 于 
监听 和 移 除 事 件 的 方法 都 是 外 部 传人 的 ， 因 为 它 既 处 理 原生 DOM 事件 的 添加 删除 ， 也 处 理 自 定 义 事件 
的 添加 删除 。 


对 于 on 的 逗 历 ， 首 先 获得 每 一 个 事件 名 ， 然 后 做 ”normalizeEvent 的 处 理 : 


const normalizeEvent = Cached((name: String): 六 
name: String， 
once: boolean， 
capture: boolean， 
passive: boolean， 
handler?: Functiony 
params?: Array<any> 
] 汪 人 nt 
const passive = name.charAt(0) === '&， 
name = passlive ?3 name.Slice(1) : name 
const once = name.charAt(0) === :~' // Prefixed Last，checked first 
name = once ? name.S1lice(1I) : name 
const capture = name.charAt(0) === '! 
name = Capture ?3 name.Slice(1) : name 
Fetunmn 
namey， 
oncey， 
Capture， 
passive 
】} 
了]) 


根据 我 们 的 的 事件 名 的 一 些 特 殊 标识 〈 之 前 在 addhandler 的 时 候 添 加 上 的 ) 区 分 出 这 个 事件 是 否 有 


once 、 _ capture 、 passive 等 修饰 符 。 


处 理 完 事件 名 后 ， 又 对 事件 回调 本 数 做 处 理 ， 对 于 第 一 次 ， 满 足 isundef(old) 并 且 
isUndef(cur .fns) ， 会 执行 cur = on[name] = createFnInvoker(cur) 方法 去 创建 一 个 回调 本 
数 ， 然后 在 执行 add(event ,name，cur，event .once，event ,capture，event .passlive， 


event .params) 完成 一 次 事件 绑 定 。 我 们 先 看 一 下 _createFnInvoker 的 实现 : 


export function createFnInvoker (fns: Function | Array<Function>): Function 攻 
function invoker () 攻 

const fns = invoker .fns 

if (Array.IsArray(fns)) 区 
const cloned = fns.slice() 
for (let 工 = 0;) 工 < cloned.Jlength; I++) { 

cloned[i],apply(Cnul1，arguments) 

} 

TelseEt 
return fns.apply(nul1，arguments) 


Invoker .fns = fns 


return Invoker 


这 里 定义 了 :invoker 方法 并 返回 ， 由 于 一 个 事件 可 能 会 对 应 多 个 


回调 本 数 ， 所 以 这 里 做 了 数组 的 判 


呆 ， 多 个 回调 函数 就 依次 调用 。 注 意 最 后 的 赋值 逻辑 ， invoker.fns = fns ， 每 一 次 执行 

回 到 updateListeners ， 当 我 们 第 二 
次 执行 该 本 数 的 时 候 ， 判 断 如 果 cur !== ol1d ， 那 么 只 需要 更 改 old.fns = cur 把 之 前 绑 定 的 
involer.fns 赋值 为 新 的 回调 函数 即 可 ， 并 且 通过 on[name] = old 保留 引用 关系 ， 这 样 就 保证 
了 事件 回调 只 添加 一 次 ， 之 后 仅仅 去 修改 它 的 回调 酚 数 的 引用 。 


updateListeners 丁 数 的 最 后 表 历 oldon 拿 到 事件 名 称 ， 判 断 如 果 满 足 isundef(on[name]) ， 
则 执行 remove(event .name，oldon[name]，event.capture) 去 移 除 事件 回调 。 


invoker 本 数 都 是 从 invoker.fns 里 取 执 行 的 回调 函数 ， 


已 


了 解 了 _ updateListeners 的 实现 后 ， 我 们 来 看 一 下 在 原生 DOM 事件 中 真正 添加 


回调 和 移 除 回调 本 


数 的 实现 ， 它 们 的 定义 都 在 src/platforms/web/yruntime/modules/event .js 中 : 


fuUnctionmiaddu( 
event : string， 
handler: Function， 
once: boolean， 
capture: boolean， 
passive: boolean 


六 下 


handler = withMacroTask(handJler ) 


If (once) handler = createonceHandJler(handler，event，capture ) 


target.addEventListener( 
event， 
hand]ler， 
SupportsPasslive 
? { capture，passive } 
: Capture 


function remove (人 
eVeniE strazng/ 
handler: Function， 
capture: boolean， 
_target?3: HTMLELement 


) 
(_target || target).removeEVvVentListener( 
event， 
handler.,_ withTask || handJer， 
Capture 
) 


add 和 remove 的 逻辑 很 简单 ， 就 是 实际 上 调用 原生 addEventListener 和 
removeEventListener ， 并 根据 参数 传递 一 些 配置 ， 注 意 这 里 的 hanlder 会 用 
withMacroTask(hanlder) 包 囊 一 下 ， 它 的 定义 在 src/core/util/next-tick.js 中 : 


export function withMacroTask (fn:; Function): Function 攻 
return fn._ withTask || (fn, withTask = function () 并 
USeMacroTask = true 
const res = fn,apply(nul1，arguments) 
USeMacroTask = false 
return res 


}) 


实际 上 就 是 强制 在 DOM 事件 的 回调 本 数 执行 期 间 如 果 修 改 了 数据 ， 那 么 这 些 数据 更 改 推 和 人 的 队列 会 被 
当做 macroTask 在 nextTick 后 执行 。 


目 定 义 事件 


除了 原生 DOM 事件 ，Vue 还 支持 了 自 定义 事件 ， 并 且 自 定义 事件 只 能 作用 在 组 件 上 ， 如 果 在 组 件 上 使 
用 原生 事件 ， 需 要 加 .native 修饰 符 ， 普 通 元 素 上 使 用 .native 修饰 符 无 效 ， 接 下 来 我 们 就 来 分 
析 它 的 实现 。 


在 _ render 阶段 ， 如 果 是 一 个 组 件 节 点 ， 则 通过 createcomponent 创建 一 个 组 件 _vnode ， 我 们 再 
来 回顾 这 个 方法 ， 定 义 在 src/core/vdom/ycreate-component .js 中 : 


export function createCcomponent (人 
CEom' EEClass<Componment=l Eunctaoniloobjecta llEVondr 
data: ?3VNodeData， 
CDOnkEexes Componesntcy 
children: ?Array<VNode>， 
agoStrang 
): VNode | Array<VNode> | void 攻 
7 
const Jisteners = data,on 


data.on = data.nativeon 


CO 

const name = Ctor,.options ,name || tag 

const vnode = new VNode( 
iiVuUescomponenes$tetonmscndhy$tnamea2 三 nameT 7 
data，undefined，undefined，undefined，context， 
(ctoraipropsDatanastenersnutag endreni 冯 
asyncFactory 


return vnode 


我 们 只 关注 事件 相关 的 逻辑 ， 可 以 看 到 ， 人 它 把 data.on 赋值 给 了 1listeners ， 把 

data.nativeon 赋值 给 了 data.on ， 这 样 所 有 的 原生 DOM 事件 处 理 跟 我 们 刚 示 介绍 的 一 样 ， 它 是 
在 当前 组 件 环境 中 处 理 的 。 而 对 于 自 定义 事件 ， 我 们 把 listeners 作为 vnode 的 
componentoptions 传人 ， 它 是 在 子 组 件 初始 化 阶段 中 处 理 的 ， 所 以 它 的 处 理 环境 是 子 组 件 。 


然后 在 子 组 件 的 初始 化 的 时 候 ， 会 执行 initInternalComponent 方法 ， 它 的 定义 在 


src/core/instance/init.js 中 : 


export function initInternalComponent (vm: Component，options: InternalComponentOpt 
Ions) 1{ 

const opts = vm.$options = 0bject,create(vm.constructor.options) 

人 二 和 


const vnodecomponentoOptions = parentVnode .componentOptions 


opts,._parentListeners = vnodecomponentoptions .1Listeners 
2 


这 里 拿 到 了 父 组 件 传人 的 1isteners ， 然 后 在 执行 initEvents 的 过 程 中 ， 会 处 理 这 个 
listeners ， 定 义 在 src/core/instance/events.js 中 : 


export function initEvents (vm: Component ) 攻 
vm,_events = 0bject.create(null) 
vm,_hasHookEvent = false 
// init parent attached events 
const listeners = vm,.$options,_parentListeners 
If (1Listeners) 革 


updateCcomponentListeners(vm，]1isteners ) 


拿 到 listeners 后 ， 执 行 updateCcomponentListeners(vm，1Listeners) 方法 : 


Jet target: any 
export function updatecomponentListeners (人 
vm: Component， 
JStenefrssobyect 
0]1dListeners: ?30bject 
JE 
target = Vm 
updateListeners(1Listeners，01dListeners || 全 ，add，remove，vm) 
target = undefined 


updateListeners 我 们 之 前 介绍 过 ， 所 以 对 于 自 定 义 事 件 和 原生 DOM 事件 处 理 的 差异 就 在 事件 添加 
和 删除 的 实现 上 ， 来 看 一 下 自 定 义 事件 add 和 remove 的 实现 : 


让 Unmctioneadd 大 (eVemt mnonmcey 基 上 
If (once) 
target.$once(event，Tfn) 
Telsentk 
target.$on(event，Tfn) 


functlion remove (event，fnj) 1 疙 
target.$off(event，Tfn) 


实际 上 是 利用 Vue 定义 的 事件 中 心 ， 简 单 分 析 一 下 筷 的 实现 : 


export function eventsMixin (Vue: Class<Component>) 攻 
const hookRE = /Ahook:/ 
Vue.prototype,$on = function (event: string | Array<string>，fn: Function): Compo 
nent 攻 
const vm: Component = thils 
If (Array.iIisArray(event ) ) 六 
for (let 工 = 0， 1 = event,.Jength; 工 < ) I++) 
this.$on(event[I]，fn) 


else { 
(vm._events[event] || (vm.,_events[event] = [])),.push(fn) 


// optimize hook:event cost by using a boolean flag marked at registration 
// instead of a hash Lookup 
If (hookRE.test(event)) 攻 

vm,_hasHookEvent = true 


return Vm 


Vue.prototype,$once = function (event: String，fn: Function): Component 攻 
const vm: Component = this 
UnmCeon 丰 DER 本 攻 
vm.$off(event，on) 
fn.apply(vm，arguments) 
】} 
on.fn = fn 
vm,$on(event，on) 
return Vm 


Vue.prototype,$off = function (event?: String | Array<string>，Tfn?: Function): Co 
mponent 攻 
const vm: Component = thls 
请 可 中 
If (!arguments,Jength) 六 


even 


vm,， events = 0bject,create(nu]1) 
return Vnm 
} 
// array of events 
If (Array,IsArray(event )) { 
for (let 工 = 0， 1 = event,Jength; 工 < ) I++) 并 
this.$off(event[I]，fn) 
} 
return Vm 
】} 
帮 筷 specTIfacEeyent 
const cbs = vm._events[event] 
EECDSs) 本 人 
return Vnm 
} 
an 
vm,_events[event] = _ null 
return Vnm 
} 
CE 
// Specific handler 
Jet cb 
let 奔 = cbs.length 
while (I--) 并 


cb = cbs[I] 
If (cb === fn || cb.fn === fn) 
cbs.Splice(I，1 工 ) 
break 
】} 
return Vm 


Vue.prototype,$emit = function (event: String): Component 荆 
const vm: Component = this 


If (process ,env,NODE_ENV !== 'production' ) 攻 
const lowerCaseEVvent = event .toLowerCase() 
If (LowerCaseEvent !== event && vm,_events[JLowerCaseEvent]) 
tip( 


JUEVent towereCaseEventisennEtedgmnEcomnponenc 十 


:${tformatComponentName(vm) 上 but the handler Is registered for "$tevent)”， 


“Note that HTML attributes are case-insensitive and you cannot Use ”十 
`V-on to Listen to cameJlCase events when Using in-DOM tempJates， ”+ 
"You Shou1ld probably use "${fhyphenate(event)}” instead of "$tevent}"., 


Jet cbs = vm._events[event] 
If (cbs) 革 


cbs = cbs,length > 1 ? toArray(cbs) : cbs 
const args = toArray(arguments，1) 
for (let II= 0， 1 = cbs.length; 工 < 1 I++) 攻 
EDyE 
cbs[i]l.apply(vm，args) 
Tcatchn te at 
handJeError(e，vm， event handler for "$ftevent}”) 
】} 


return Vnm 


j 
】} 


非常 经 典 的 事件 中 心 的 实现 ， 把 所 有 的 事件 用 vm._events 存储 起 来 ， 当 执行 vm.$on(event,fn) 
的 时 候 ， 按 事件 的 名 称 event 把 回调 琐 数 fn 存储 起 来 vm._events[event].push(fn) 。 当 执行 
vm,$emit(event) 的 时 候 ， 根 据 事件 名 event 找到 所 有 的 回调 函数 let cbs = 
vm._events[event] ， 然 后 静 历 执行 所 有 的 回调 本 数 。 当 执行 vm.$off(event, fn) 的 时 候 会 移 除 指 
定 事件 名 event 和 指定 的 fn 当 执 行 vm.$once(event, fn) 的 时 候 ， 内 部 就 是 执行 vm.$on ， 并 
且 当 回调 函数 执行 一 次 后 再 通过 vm.$off 移 除 事件 的 回调 ， 这 样 就 确保 了 回调 函数 只 执行 一 次 。 


所 以 对 于 用 户 自 定义 的 事件 添加 和 删除 就 是 利用 了 这 几 个 事件 中 心 的 API。 需 要 注意 的 事 一 

反 ， vm.$emit 是 给 当前 的 vm 上 浜 发 的 实例 ， 之 所 以 我 们 常用 它 做 父子 组 件 通 讯 ， 是 因为 它 的 
调 函 数 的 定义 是 在 父 组 件 中 ， 对 于 我 们 这 个 例子 而 言 ， 当 子 组 件 的 button 被 点 击 了 ， 它 通过 
this.$emit('select') 拍 发 事件 ， 那 么 子 组 件 的 实例 就 监听 到 了 这 个 _ select 事件 ， 并 执行 它 的 
回调 函数 一 一 定义 在 父 组件 中 的 selectHandler 方法 ， 这 样 就 相当 于 完成 了 一 次 父子 组 件 的 通讯 。 


可 


总 结 

那么 至 此 我 们 对 Vue 的 事件 实现 有 了 进一步 的 了 解 ，Vue 支持 2 种 事件 类 型 ， 原 生 DOM 事件 和 上 自 定义 

事件 ， 它 们 主要 的 区 别 在 于 添加 和 删除 事件 的 方式 不 一 样 ， 并 且 自 定义 事件 的 忽 发 是 往 当 前 实例 上 浙 

发 ， 但 是 可 以 利用 在 父 组 件 环境 定义 回调 本 数 来 实现 父子 组 件 的 通讯 。 另 外 要 注意 一 点 ， 只 有 组 件 节 

点 才 可 以 添加 自 定 义 事件 ， 并 且 添 加 原生 DOM 事件 需要 使 用 native 修饰 符 ; 而 普通 元 素 使 用 
,native 修饰 符 是 没有 作用 的 ， 也 只 能 添加 原生 DOM 事件 。 


VvV-Imodel 


很 多 同学 在 理解 Vue 的 时 候 都 把 Vue 的 数据 响应 原理 理解 为 双向 绑 定 ， 但 实际 上 这 是 不 准确 的 ， 我 们 
之 前 提 到 的 数据 响应 ， 都 是 通过 数据 的 改变 去 驱动 DOM 视图 的 变化 ， 而 双向 绑 定 除了 数据 驱动 DOM 
外 ，DOM 的 变化 反 过 来 影响 数据 ， 是 一 个 双向 关系 ， 在 Vue 中 ， 我 们 可 以 通过 v-model 来 实现 双 

向 绑 定 。 


v-model 即 可 以 作用 在 普通 表单 元 素 上 ， 又 可 以 作用 在 组 件 上 ， 它 其 实 是 一 个 语法 糖 ， 接 下 来 我 们 
就 来 分 析 v-model 的 实现 原理 。 


表单 元 素 
为 了 更 加 直观 ， 我 们 还 是 结合 示例 来 分 析 : 


let vm = new Vue({ 
el #app 
tempJlate: "<div>， 
+ "<jIinput V-model="message”placeholder="edit me"> ”+ 
De2MessageTLsotmessagei 二 0 pn 
TV 二 
data() 区 
return 并 
message: 
】} 
】} 
了 ) 


这 是 一 个 非常 简单 demo， 我 们 在 _ input 元 素 上 设置 了 v-model 属性 ， 绑 定 了 _ message ， 当 我 们 
在 input 上 输入 了 内 容 ， message 也 会 同步 变化 。 接 下 来 我 们 束 来 分 析 Vue 是 如 何 实现 这 一 效果 
的 ， 其 实 非常 简单 。 

也 是 先 从 编译 阶段 分 析 ， 首 先是 parse 阶段 ， v-model 被 当做 普通 的 指令 解析 到 
el,directives 中 ， 然 后 在 codegen 阶段， 执行 genData 的 时 候 ， 会 执行 const dirs = 
genDirectives(el，state) ， 它 的 定义 在 src/compiler/codegen/index.js 中 : 


functlion genDirectIives (el: ASTE]Dement state codegenSstateji: strarng | void 攻 
const dirs = el.directives 
if (!dirs) return 
EGREGSE= OnectVes [is 
let hasRuntjime = false 
let II，1，dir，needRuntime 
for (LI=0， 1 = dirs,. length; 工 < I++) 
dir = dirs[I] 
needRuntime = true 
const gen: DirectiveFunction = state.directives[dir.name] 
If (gen) 荆 


// compile-time directive that manipulates AST. 
// returns true If it also needs a_ runtime counterpart ， 
needRuntime = !!gen(el，dir，Sstate.warn) 
} 
If (needRuntime) 区 
hasRuntime = true 
res +=  {tname:"$ftdir.name}y” rawName:"$tdir.rawName}"${ 
dsvaluee2 value(StauurvalueI expressaons$ 划 SONESErangrftytdmnsvalueyi 


]${ 

desaig 2 GO 再 dasaogl on 
]${ 

dressmnodafess 2 冯 modafaieseshtSONESEngahy(danramodamfers IE 
]， 


车 (hasRuntime) 1{ 


eunnEesesTacel(O ED) 攻 Ti 


genDrirectives 方法 就 是 青 历 el.directives ， 然后 获取 每 一 个 指令 对 应 的 方法 const gen : 
DirectiveFunction = state.directives[dir,name] ， 这 个 指令 方法 实际 上 是 在 实例 化 
codegenstate 的 时 候 通过 option 传人 的 ， 这 个 option 就 是 编译 相关 的 配置 ， 它 在 不 同 的 平台 
下 配置 不 同 ， 在 web 环境 下 的 定义 在 src/platforms/web/ycompiler/options.js 下 : 


export const baseoptions: Compileroptions = 荆 
eXxpectHTML: truey， 
modules， 
directives， 
IISPreTag， 
ISUnaryTadg， 
mustUseProp， 
canBeLeftopenTag， 
IISReservedTag， 
getTagNameSspacey， 
StaticKkKeys: genStaticKeys(moduJles ) 


directives 定义 在 Src/Vplatforms/web/ycompilerVvdirectives/index.Jjs 中 : 


exXxport default :{ 
modeJl， 
exit 
htm] 


那么 对 于 v-model 而 言 ， 对 应 的 directive 画 数 是 在 
src/platforms/web/ycompiler/directives/model.js 中 定义 的 model 画 数 : 


export default functIonm model (人 
el3:ASTELement， 
dir: ASTDirective， 
_warn: Function 
JE2boolean 帮 《 
warn = _warn 
const Value = dir.Vvalue 
const modifiers = dir.modifiers 
const tag = el.tag 
const type = el,attrsMap,type 


If (process.env,.NODE_ENV !== "production' ) { 
// inputs with type="file"” are read only and setting the Input's 
// value will throw an error， 
If (tag === ' Input” && type === "file') 革 
warn( 
<b$telastaglVsmnodel= Valueyatype= fale NE 
WEIALeSInbDutsEacearceadionlyaiUseav=onecnangeaascenernsteada 


If (elL.component ) 攻 
genComponentModel(el，Vvalue，modifiers) 
// component v-model doesn't need extra runtime 
return false 


} else if (tag === ' Select ') 荆 
genSeJlect(el，Vvalue，modifiers ) 

} else if (tag === Input” && type === ' checkbox') 革 
genCheckboxModel(el，YVvalue，modifiers ) 

} else if (tag === Input” && type === radio' ) { 


genRadioModel(el，Vvalue，modifiers) 

} else if (tag === ' input'” || tag === "textarea' ) 
genDefau1ltModel(el，Vvalue，modifiers) 

} else if (!config.IsReservedTag(tag)) 二 
genComponentModel(el，Vvalue，modifiers) 
// component vV-model doesn't need extra runtime 
return false 


} else if (process.env,NODE_ENV !== "production') 
warn( 
“<${el.tag} vV-mode1l="$tvalue}">: ”+ 
VsmodelwaswnotsupportedEonmnselementtypea 二 


"If you are working with contenteditable，itx's recommended to ”+ 
"wrap a library dedicated for that purpose inside a custom component ,， 


// ensure runtime directive metadata 
returnm tue 


也 就 是 说 我 们 执行 needRuntime = !!gen(el，dir，state,warn) 就 是 在 执行 model 画 数 ， 它 会 
根据 AST 元 素 节 点 的 不 同情 况 去 执行 不 同 的 逻辑 ， 对 于 我 们 这 个 case 而 言 ， 它 会 命 
genDefaultModel(el，value，modifiers) 的 逻辑 ， 稍 后 我 们 也 会 介绍 组 件 的 处 理 ， 其 它 分 支 同 
们 可 以 自行 去 看 。 我 们 来 看 一 下 _ genpefaultModel 的 实现 : 


此 


function genDefau]ltModel (人 
el ASTELement， 
Value strang/ 
modifiers: ?ASTModifiers 
)EE2boolean 丰 人 


const type = el,attrsMap,type 


// warn if v-bind:value conf1licts with vV-model] 
// except for inputs with v-bind:type 
If (process.env.NODE_ENV !== "production' ) { 
const Value = el,attrsMap['v-bind:value'] || el,attrsMap[' :value '] 
const typeBinding = el,attrsMap['v-bind:type'] || el,attrsMap[' :type'] 
If (value && !typeBinding) 攻 
const bjinding = el,attrsMap['v-bind:value'] ?3 'v-bind:Vvalue'” : :Value' 
warn( 
`$fbinding}y="$ftvalue}y” conflicts with VvV-model on the Same element ”十 
becausetcheliattermiatready expandsitoavalueubzndingEainternally 


) 
】} 
】} 
const { Jazy，number，trim } = modifiers || 癸 
const needCompositionGuard = !lazy && type !== range' 
const event = azy 
?2 "change 
: type === range' 
?2 RANGE_TOKEN 
"input 
Jet ValueExpression = '$event.target,.VvValue 
if (trim) 区 
ValueExpression =  “`$event,target.value,trim() 
】} 
If (number ) 六 
ValueExpression =  _n(${ftvalueExpression}y) 
】} 


let code = genAssignmentCcode(value，VvalueExpression) 
If (needCcompositionGuard) 荆 
code = If($event.target.composing)return;$ftcode} 


addProp(el， 'value'， ($tvalue}) ) 
addHandler(e1l，event，code，nul1，true) 
If (trim || number) 蕊 

addHandJer(el， 'blur'， '$forceUpdate() ') 


genDefaultModel 本 数 先 处 理 了 modifiers ， 它 的 不 同 主要 影响 的 是 event 和 
valueExpression 的 值 ， 对 于 我 们 的 例子 ， event 为 input ， valueExpression 为 
$event target,Vvalue 。 然后 去 执行 genAssignmentCcode 去 生成 代码 ， 它 的 定义 在 


Src/Vcompiler/vdirectives/Vmodel,Jjs 中 : 


全 全 
* Cross-platform codegen helper for generating v-model value assignment code ， 
人 
export function genAssignmentCcode (人 
Value: String， 
asSsignment: string 


RS 起 rang 帮 
const res = parseModel(value) 
If (res,.key === nul1) { 
return  `“$fvalue}y=$ftassignment} 
elLSe 王 人 
return  $set($tres.exph，$tresvkey}，$tassIignment }) 
} 


该 方法 首先 对 v-model 对 应 的 value 做 了 解析 ， 它 处 理 了 非常 多 的 情况 ， 对 我 们 的 例子 ， value 
就 是 messgae ， 所 以 返回 的 res.key 为 null ， 然 后 我 们 就 得 到 ${value}=${fassignment】 ， 
也 就 是 _ message=$event .target.value 。 然 后 我 们 又 命中 了 needcompositionGuard 为 true 的 逻 
辑 ， 所 以 最 终 的 code 为 


If($event .target,composing)return;message=$event .target.VvValue 。 


code 生成 完 后 ， 又 执行 了 2 名 非常 关 键 的 代码 : 


addProp(elLl， 'value'， `($fvalue}) ) 
addHandjler(e1L，event，code，null1，true) 


这 实际 上 惑 是 input 实现 v-model 的 精 颈 ， 通 过 修改 AST 元 素 ， 给 el 添加 一 个 prop ， 相 当 
于 我 们 在 _ input 上 动态 绑 定 了 _ value ， 又 给 el 添加 了 事件 处 理 ， 相 当 于 在 input 上 绑 定 了 
input 事件 ， 其 实 转换 成 模板 如 下 : 


<Input 
Vv-bind:Vvalue='"message" 
V-on:input="message=$event .target .Value"> 


其 实 就 是 动态 绑 定 了 _ :input 的 value 指向 了 messgae 变量 ， 并 且 在 触发 input 事件 的 时 候 去 
动态 把 message 设置 为 目标 值 ， 这 样 实 际 上 就 完成 了 数据 双向 绑 定 了 ， 所 以 说 v-model 实际 上 就 
是 语法 糖 。 


再 回 到 genDirectives ， 它 接 下 来 的 逻辑 就 是 根据 指令 生成 一 些 data 的 代码 : 


If (needRuntime) { 
hasRuntime = true 
res += “{name:"$fdir.name}y" rawName:"$fdir,.rawName}"${ 
deyalues> FrvauUestSfdarnresyaueyRexpressronpy 和 fsONRStnrngnhydnnsvanuey) E: 


}${ 

drneargE2saide 中 ma 
}${ 

dmodafaers2zsmodnfauers 中国 SONESGngnfytcnrnnmnodurfrers)) ES 
站 本 


对 我 们 的 例子 而 言 ， 最 终生 成 的 render 代码 如 下 : 


WaiemGemnarsD 本 上 
EeEuUnmEcdnv EGGnpUt 
directives:[{ 
name: "mode1”"， 
rawName:"vV-mode1”"， 
Value:(message)， 
expression: "message" 
j]， 
attrs:{"placeholder' edit me 7 
dompProps:{ "value":(message)}， 
on':{"input" :function($event ){ 
If($event target.composing) 
eumny 
message=$event ,target.Vvalue 
}}})， cc('p'LVv("Message 1IS: "+_Ss(message))]) 


用 


关于 事件 的 处 理 我 们 之 前 的 章节 已 经 分 析 过 了 ， 所 以 对 于 input 的 v-model 而 言 ， 完 全 就 是 语法 
精 ， 并 且 对 于 其 它 表单 元 素 套 路 都 是 一 样 ， 区 别 在 于 生成 的 事件 代码 会 略 有 不 同 。 


v-model 除了 作用 在 表单 元 素 上 ， 新 版 的 Vue 还 把 这 一 语法 糖 用 在 了 组 件 上 ， 接 下 来 我 们 来 分 析 它 
的 实现 。 


组 件 


为 了 更 加 直观 ， 我 们 也 是 通过 一 个 例子 分 析 : 


Jet Child = 葬 
tempJlate: "<div>， 
+ "<iIinput :Value="value"”@input="updatevalue” placeholder="edit me"> ”+ 
da 
props: ['value ']， 
methods: 攻 
updateVvValue(e) 革 
this,$emit('input'，e.target.Vvalue) 


let vm = new Vue({ 
eL: :.#app' 
tempJLate: "<div> ”+ 
"<chlild vV-model="message"></child> ”+ 
<D2Messagenmstmnessagee 人 is/p> 二 
EDV 过 
data() 区 
PetucnEEt 
message: 
】} 
】， 
Components: 攻 
Child 
】} 
了]) 


可 以 看 到 ， 父 组 件 引 用 child 子 组 件 的 地 方 使 用 了 _v-model 关联 了 数据 message ; 而 子 组 件 定 
义 了 一 个 value 的 prop ， 并 且 在 input 事件 的 回调 函 数 中 ， 通 过 this.$emit('input'， 
e.target.value) 派发 了 一 个 事件 ， 为 了 让 v-model 生效 ， 这 两 点 是 必须 的 。 


接着 我 们 从 源码 角度 分 析 实 现 原理 ， 还 是 从 编译 阶段 说 起 ， 对 于 父 组 件 而 言 ， 在 编译 阶段 会 解析 v- 
modle 指令 ， 依 然 会 执行 genData 画 数 中 的 genDirectives 画 数 ， 接 着 执行 
src/plLatforms/web/compiler/directives/model.js 中 定义 的 model 本 数 ， 并 命中 如 下 逻辑 : 


else if (!config.IsReservedTag(tag) ) 六 
genComponentModel(el1，Vvalue，modifiers ) ; 
Feturnifalse 


genComponentMode1l 本 数 定义 在 Src/Vcompiler/vdirectives/model,Jjs 中 : 


export function genComponentModel 人 
6 : ASTEILement， 
value: string， 


modifiers: ?ASTModifiers 
)R ?booleanet 


const { number，trim } = modifiers || 人 总 


const baseValueExpression = “'$$Vv' 
Jet ValueExpression = baseVvalueExpression 
if (trim) 
ValueExpression = 
(typeof ${tbaseValueExpression} === "String' ”二 
`“? ${fbaseValueExpression},trim() ”+ 
`“: $tbaseVvalueExpression}) 


】} 
If (number ) 六 
ValueEXxpression =  _n(${tvalueExpression}y) 
】} 
const assignment = genAssignmentCcode(value，VvalueExpression) 
el,.model = 革 
Value: ` ($f{value}+) ， 
eXxpression:  "$tvalue}”， 


Callback: “function (${fbaseVvValueExpression}+) {{assignment}} 


gencomponentModel 的 逻辑 很 简单 ， 对 我 们 的 例子 而 言 ， 生 成 的 el.model 的 值 为 : 


el.model = 攻 
callback: 'function ($$v) {message=$$v} '， 
expression: ' "message"'， 
Value: (message) 


那么 在 genDirectives 之 后 ， genData 本 数 中 有 一 段 逻 辑 如 下 : 


If (el,.modeJl) 攻 
data += model:{value:${ 
el,model.value 
}，callback:${ 
el,.model.callback 
由 Expressonmast 
el,.model.expression 


站 


c 


那么 父 组 件 最 终生 成 的 render 代码 如 下 : 


with(this){ 
EeeunnscdveaIscchnald 


V-model 


modeJ:T 
Value:(message)， 
callback:function ($$v) { 

message=$$v 

] 
expression:"message” 

】} 

】)， 


_C("p' [VC"Message Is: "+ Ss(message))])], 1) 


然后 在 创建 子 组 件 vnode 阶段 ， 会 执行 createcomponent 本 数 ， 它 的 定义 在 


src/core/vdom/Vcreate-component .js 中 : 


export function createComponent ( 
CEO Class<cComponmenmt> EuUnctaonmalEObjectalEvond， 
data: ?3VNodeData， 
context: Component， 
children: ?Array<VNode>， 
age2estcmng 
): VNode | Array<VNode> | void 攻 
0 
// transform component VvV-model data into props & events 
If (IsDef(data.model)) 革 
transformModel(Ctor.options，data) 


// extract props 

const propsData = extractPropsFromvVNodeData(data，Ctor，tag ) 

Ah 

// extract 1Listeners，Since these needs to be treated as 

// child component 1Listeners instead of DOM 1Listeners 

const Jisteners = data,on 

Ch 

const Vvnode = new VNode( 
`“vue-component-${fCtor.cid}y$fname ?3  “-$tname} ”: ” 》}， 
data，undefined，undefined，undefined，context， 
(ctornaipropsDatanastenersutag endreni 
asSyncFactory 


return vnode 


其 中 会 对 data.model 的 情况 做 处 理 ， 执 行 transformModelL(Ctor.options，data) 方法 : 


// transform component vV-model info (value and callback) into 
// prop and event handler respectively.， 
function transformModel (options，data: any) 攻 


242 


const prop = (options .model && options ,model,.prop) || value' 


const event = (options .modeJl && options ,model,event) || ”input' 
(data.props || (data.props = {1))[prop] = data.model.value 
const on = data.on || (data.on = {) 


If (IsDef(on[event])) { 
on[event] = [data.model.callback].concat(on[event] ) 
else 
on[event] = data.mode1,.callback 
】} 
】} 


transformModel 逻辑 很 简单 ， 给 data.props 添加 data.model.value ， 并 且 给 data.on 添加 
data.model.callback ， 对 我 们 的 例子 而 言 ， 扩 展 结果 如 下 : 


data.props = 革 
Value: (message)， 
】} 
data.on = 攻 
Input: function ($$v) { 
message=$$v 
】} 
】} 


其 实 就 相当 于 我 们 在 这 样 编写 父 组 件 : 


let vm = new Vue({ 
el:  "'#app '， 
tempJlate: "<div> ”+ 
"<child :Value="message"”Q@input="message=arguments[0]"></child> ”+ 
"<p>Message Is: {{L message }}</p> ”+ 
Vs 
data() 区 
return 疙 
message: 
】} 
】， 
Components: 攻 
Child 
】} 
了]) 


子 组 件 传 递 的 value 绑 定 到 当前 父 组件 的 _ message ， 同 时 监听 自 定义 input 事件 ， 当 子 组 件 派 
发 input 事件 的 时 候 ， 父 组 件 会 在 事件 回调 函数 中 修改 message 的 值 ， 同 时 value 也 会 发 生变 
化 ， 子 组 件 的 input 值 被 更 新 。 


这 就 是 典型 的 Vue 的 父子 组 件 通讯 模式 ， 父 组 件 通过 prop 把 数据 传递 到 子 组 件 ， 子 组 件 修改 了 数据 
后 把 改变 通过 $emit 事件 的 方式 通知 父 组 件 ， 所 以 说 组 件 上 的 v-model 也 是 一 种 语法 糖 。 


另外 我 们 注意 到 组 件 v-model 的 实现 ， 子 组 件 的 value prop 以 及 泊 发 的 input 事件 名 是 可 配 
的 ， 可 以 看 到 transformModel 中 对 这 部 分 的 处 理 : 


function transformMode1l (options，data: any) 革 


const prop = (options ,model && options .model.prop) || value， 
const event = (options ,model && options .model.event) || input' 
CA 


也 就 是 说 可 以 在 定义 子 组 件 的 时 候 通 过 model 选项 配置 子 组 件 接收 的 prop 名 以 及 诉 发 的 事件 名 ， 
举 个 例子 : 


Jet Child = 
template: "<div> 
+ "<input :Value="msg"”@input="updateVvalue” placeholder="edit me">， 十 


TV 
props: ['msg']， 
modeJl: 攻 
prop: "msg'"， 
event : ' change 
}， 
methods: 攻 


updateVvValue(e) 革 
this.$emit('change'，e,target.value) 


Jet vm = new Vue({ 
el:  "'#app '， 
tempJlate: "<div> ”+ 
"<child v-model="message"></child> ”+ 
I<p>Message smnessage 同 让 <]p> itr 
"</div> '， 
data() 
Peturn 
message: 
】} 
】， 
Components: { 
Child 
】} 
了 ) 


子 组 件 修改 了 接收 的 prop 名 以 及 扳 发 的 事件 名 ， 然 而 这 一 切 父 组 件 作为 调用 方 是 不 用 关心 的 ， 这 样 
做 的 好 处 是 我 们 可 以 把 value 这 个 prop 作为 其 它 的 用 途 。 


总 结 


JE 


那么 至 此 ， v-model 的 实现 就 分 析 完 了 ， 我 们 了 解 到 它 是 Vue 双向 绑 定 的 真正 实现 ， 但 本 质 上 束 是 
一 种 语法 糖 ， 它 即 可 以 文 持原 生 表单 元 素 ， 也 可 以 支持 自 定 义 组件 。 在 组 件 的 实现 中 ， 我 们 是 可 以 配 
置 子 组 件 接收 的 prop 名 称 ， 以 及 派发 的 事件 名 称 。 


slot 


Vue 的 组 件 提 供 了 一 个 非常 有 用 的 特性 slot 插 槽 ， 它 让 组 件 的 实现 变 的 更 加 有 灵活。 我 们 平时 在 
开发 组 件 库 的 时 候 ， 为 了 证 组 件 更 加 有 灵活 可 定制 ， 经 常用 插 权 的 方式 让 用 户 可 以 自 定 义 内 容 。 插 构 分 
为 普通 插 槽 和 作用 域 插 槽 ， 它 们 可 以 解决 不 同 的 场景 ， 但 它 是 怎么 实现 的 呢 ， 下 面 我 们 就 从 源码 的 角 
度 来 分 析 插 模 的 实现 原理 。 


为 了 更 加 直观 ， 我 们 还 是 通过 一 个 例子 来 分 析 插 槽 的 实现 : 


Jet AppLayout = 
tempJlate: "<div class="container"> ”十 
"<header><Slot name="header"></Slot></header> ”+ 
'<main><S1ot> 默 认 内 容 </SLot></Vmain>' + 
"<footer><Slot name="footer"></Slot></footer> ”+ 
Ed 


let vm = new Vue({ 
el:  '#app '， 
template: "<div> ”+ 
"<app-1ayout> ”二 
"<h1 Slot="header">{{ttitle}y}</Zh1> ”+ 
'<p>f{msg}}</p>'， + 
"<D Slot="footer">{t{tdeschy</p> ”+ 
"<V/app-1ayout> ”十 
NA 
data() 
Feturnm 
tit1le: “' 我 是 标题 ' ， 
msg: “' 我 是 内 容 ' ， 
desc: ' 其 它 信息 ' 
】} 
】， 
Components: 六 
AppLayout 
】} 
了]) 


这 里 我 们 定义 了 _AppLayout 子 组 件 ， 它 内 部 定义 了 3 个 播 槽 ，2 个 为 具名 插 槽 ， 一 个 name 为 
header ， 一 个 name 为 footer ， 还 有 一 个 没有 定义 name 的 是 默认 插 权 。 <slot> 和 
</slot> 之 前 填写 的 内 容 为 默认 内 容 。 我 们 的 父 组 件 注 册 和 引用 了 AppLayout 的 组 件 ， 并 在 组 件 
内 部 定义 了 一 些 元 素 ， 用 来 替换 插 槽 ， 那 么 它 最 终生 成 的 DOM 如 下 : 


<d IIV> 


<div class="container"> 
<header><h1> 我 是 标题 </h1></header> 
<main><p> 我 是 内 容 </p></main> 
<footer><p> 其 它 信息 </p></footer> 
</diIv> 
</div> 


编译 


还 是 先 从 编译 说 起 ， 我 们 知道 编译 是 发 生 在 调用 vm.$nmount 的 时 候 ， 所 以 编译 的 顺序 是 先 编译 父 组 
件 ， 再 编译 子 组 件 。 


首先 编译 父 组 件 ， 在 parse 阶段 ， 会 执行 processSlot 处 理 slot ， 它 的 定义 在 


src/compiler/parser/index.js 中 : 


functionm processsSlot el) 


if (el,tag === "Slot' ) { 
el,.SJotName = getBindingAttr(e1l， name ') 
If (process,env,NODE_ENV !== "production' && el,.key) { 
warn( 


`\ key” does not work on <Slot> because Slots are abstract outJlets ”十 
LandcanpossrblyEexpandigmntoimuntrplewelenmnen 蕊 sa 十 
UseicnekeysonanwrappungEelementansteada 


】} 
else ({ 


Jet SlotScope 
If (el,tag === ' template') 六 
SlotScope = getAndRemoveAttr(el， ' scope ' ) 
TSEanbuUleaOnmomne Ni 
If (process,.env.NODE_ENV !== :production'”&& SlotScope) 
warn( 
iiEnescopenattrnabukenihonisconedEsiotsahnayeabeenEdueprecateqEand 二 
-replaced by "slot=scope" since 2.5， The mew "slot-scope”attribute ”十 
icanalsouoecewusedEonaplannenrenenmEsanEadudacnionEtoE<Eempiake>atoa 二 
idenokEeEscobeduEslokcsa 
CU 和 


el.SJotScope = SlotScope || getAndRemoveAttr(el， Slot-scope ') 


} else if ((SslotScope = getAndRemoveAttr(e1， 'Slot-scope'))) 攻 
/* Istanbul iignore 工 “*/ 
If (process.env.NODE_ENV !== "production”&& el.attrsMap[ v-for' ]) 六 
warn( 

“Ambiguous combined usage of slot-scope and v-for on <${tel.tag}> ”+ 
UV=foratakeshnrghnernprauoraty)E UsSeEaEwrappernE<cenmplate=afor knee 二 
TSCOpedeslotatcownmakeacschiearer 
Enmue 


elL.S1lotScope = SlotScope 


】} 
const SJotTarget = getBindingAttr(eLl， ' Slot ) 
If (SlotTarget) 二 
el,SlotTarget = SlotTarget === '"”"' ? '"default"”' : SlotTarget 
// preserve Slot as an attribute for natlive Shadow DOM compat 
// only for non-scoped Slots ， 
If (el.tag !== "tempJlate' && !el,slotScope) { 
addAttr(el， 'Slot'，SlotTarget) 


当 解 析 到 标签 上 有 slot 属性 的 时 候 ， 会 给 对 应 的 AST 元 素 节 点 添加 slotTarget 属性 ， 然 后 在 
codegen 阶段 ， 在 genpData 中 会 处 理 slotTarget ， 相 关 代 码 在 


Src/Vcompiler/vcodegen/index,js 中 : 


If (el.SlotTarget && !el,slotScope) { 
data += “Slot:$ftel.slotTarget},， 


会 给 data 添加 一 个 _ slot 属性 ， 并 指向 slotTarget ， 之 后 会 用 到 。 在 我 们 的 例子 中 ， 父 组 件 最 
终生 成 的 代码 如 下 : 


with(this){ 
EeunnEseC( 人 人 OnVI 
[cl('app-Jayout '， 
芽 C 全 nd 人 atrsi ESLok neauen slotiuwneaderm 站 
[-v(-s(title))])， 
-c( py，L-v(-s(msg))])， 
CPUaeESsSTOGOROEOOEeGI SObeOOtere 
[-v(-s(desc))] 
) 
] ) 
]， 
工 )} 


接 下 来 编译 子 组 件 ， 同样 在 parser 阶段 会 执行 proceSssS]lot 处 理 函 数 ， 它 的 定义 在 


Src/Vcompiler/parser/Vindex,.Jjs 中 : 


function processSlot (elL) 


If (el.tag === 'Slot') 

el,.SJotName = getBindingAttr(el， name ') 
】} 
/OA 


当 遇 到 slot 标签 的 时 候 会 给 对 应 的 AST 元 素 节 点 添加 slotName 属性 ， 然 后 在 codegen 阶段 ， 
会 判断 如 果 当 前 AST 元 素 节 点 是 _ slot 标签 ， 则 执行 genslot 画 数 ， 它 的 定义 在 


Src/vcompiler/vcodegen/index.,js 中 : 


functionigenslot (el ASTELIemenmt statescodegenstate)s straIngEE( 


const SlotName = el.SlLlotName || ” default” 

const children = genChildren(el，Sstate) 

ees 王 三 贡 是 世人 (slocNameh$tchadrema2 tchodreny 

const attrs = el.attrs &&  {${tel.attrs.map(a => “ ${tcameJize(a.name)}:$ta,.value} ) 
“Join( ，)) 


const bind = el,attrsMap['v-bind '] 
工人 (fa 已 世 这 S 汪 | 加 Dammdy 是 Sehnasudserny it 
res += nul]- 
上 
和 as 证人 
res += 7/$ftattrs} 


六 
CD 
res += `$Lattrs ? '' : null'}$tbind}- 
了 
return res + ') 


我 们 先 不 考虑 slot 标签 上 有 attrs 以 及 v-bind 的 情况 ， 那 么 它 生 成 的 代码 实际 上 就 只 有 : 


const SlotName = el.SlLlotName || ” default” 
const children = genCchildren(el，Sstate) 
下 etiirese = 汪 到 蕊 (中 slotNamerhSfchnadreni2a tcrnoldrenm 


这 里 的 slotName 从 AST 元 素 节 点 对 应 的 属性 上 取 ， 默 认 是 default ， 而 children 对 应 的 就 是 
slot 开始 和 闭合 标签 包 囊 的 内 容 。 来 看 一 下 我 们 例子 的 子 组 件 最 终生 成 的 代码 ， 如 下 : 


with(this) 
IEeEunnREC (GD VE 人 

StaticClass:"container”" 

】}[ 
_C('header' ，[_t("header")],2)， 
看 C 他 aa 司 | 辐 扯 亿 defaUt 咕 了 他 趴 大 内容) 中州 革 2 
是 CTOOkerm ELEOOUer 川 S29) 
] 


在 编译 章节 我 们 了 解 到 ， 本 数 对 应 的 就 是 renderslot 方法 ， 它 的 定义 在 


src/core/instance/render-heplpers/render-slot.js 中 : 


[ 
* Runtime helper for rendering <S1Lot> 
2 
export functaon rendersSlot (人 
nanesesrnrng 
fallback: ?Array<VNode>， 
probsne2obgjiecte 
bindobJject: ?0bject 
): ?Array<VNode> 于 
const ScopedSlotFn = this.$scopedSJlots[name] 
Jet nodes 
if (ScopedS1lotFn) { /Z// scoped Slot 
props = props || 人 匡 
If (bindobject) { 


If (process.env.NODE_ENV !== :production”&& !isobject(bindobject)) 攻 
warn( 
"Slot v-bind without argument expects an Object '， 
thIs 
) 
} 
props = extend(extend({}，bindobject)，props ) 
】} 
nodes = ScopedSlotFn(props) || fallback 
else 


const SlotNodes = this,.$slots[name] 
// warn duplicate Slot Usage 
If (SLotNodes) 六 
If (process,env.NODE_ENV !== "production' && SlotNodes,_rendered) 
warn( 


DuUpjlrcateaoDresencenotEslot tnanmehitoundiEanaanme samenrender treeai 


EnIs WakenyrEcausewrenduermrenrcos 司 7 


thIs 
) 
】 
SLotNodes._rendered = true 
】 
nodes = SlotNodes || falJlback 


const target = props && props,.S1lLot 
If (target) 区 

return this,$ereateElLement( 'template'"，({t slot: target }，nodes ) 
else { 

return nodes 


render-slot 的 参数 name 代表 插 权 名 称 slotName ， fallback 代表 插 覃 的 默认 内 容 生成 的 
vnode 数组 。 先 忽略 scoped-slot ， 只 看 默认 插 构 逻辑 。 如 果 this.$slot[name] 有 值 ， 束 返回 
它 对 应 的 vnode 数组 ， 否 则 返回 fallback 。 那 么 这 个 this.$slot 是 哪里 来 的 呢 ? 我 们 知道 子 
组 件 的 init 时 机 是 在 父 组 件 执行 patch 过 程 的 时 候 ， 那 这 个 时 候 父 组件 已 经 编译 完成 了 。 并 且 子 
组 件 在 init 过 程 中 会 执行 initRender 画 数 ， initRender 的 时 候 获 取 到 vm.$slot ， 相 关 代 
码 在 src/core/instance/render.js 中 : 


export function nzIztRender (Vmz Component) 萎 

0 

const parentVnode = vm.,.$vnode = options._parentVnode // the placeholder node in pp 
QIemeahnee 

const renderContext = parentVnode && parentVnode .context 

vm.$slots = resolveSlots(options._renderCchildren，renderContext ) 


vm.$slots 是 通过 执行 resolveSlots(options._renderCchildren，renderContext ) 返回 的 ， 它 
的 定义 在 src/core/instance/render-helpers/resolve-slots.js 中 : 


[ 
* Runtime helper for resolving raw children VNodes into a Slot object . 
2 
exporteftunctaonresolveslots ( 
children: ?Array<VNode>， 
context: ?Component 
): { [key: string]: Array<VNode> 了 攻 
const Slots = 1 
If (!children) 攻 
return Slots 
} 
forlet mi = On = chnalidrenlength aa < I++) 
const child = children[:] 
const data = child.data 
全 removesloteattrabute hnenodqewrnsWresolvediEasEavueEslotnode 
If (data && data.attrs && data.attrs.Slot) 
delete data,attrs,SlLot 
} 
// named Slots Should only be respected If the vnode was rendered in the 
// Same context ， 


If ((child.context === Context || child.fnCcontext === Context ) && 
data && data.slot != nu]Jl 
) 荆 
const name = data.Slot 
const Slot = (Slots[name] || (Slots[name] = [])) 
If (child.tag === tempJate' ) 攻 
Slot.push.apply(Slot，child.children | 襄 ) 
elseEt《 
Slot.push(child) 


else { 


(Slots.default || (Slots.default = [])).push(child) 
】} 
】} 
// 1ignore Slots that contains onlLy whitespace 
for (const name in Slots) 攻 
if (Slots[name].every(IswWhitespace)) { 
delete Slots[name] 
} 
】} 


return Slots 


resoJlveSlots 方法 接收 2 个 参数 ， 第 一 个 参数 chilren 对 应 的 是 父 vnode 的 children 四 在 
我 们 的 例子 中 就 是 <app-layout> 和 </app-layout> 包 囊 的 内 容 。 第 二 个 参数 context 是 父 
Vvnode 的 上 下 文 ， 也 就 是 父 组 件 的 vm 实例 。 


resolveSlots 画 数 的 逻辑 就 是 观 历 chilren ， 拿 到 每 一 个 child 的 data ， 然 后 通过 
data.Slot 获取 到 插 槽 名称 ， 这 个 _ slot 就 是 我 们 之 前 编译 父 组 件 在 codegen 阶段 设置 的 
data.slot 。 接 着 以 揪 权 名 称 为 key 把 child 添加 到 slots 中 ， 如 果 data.slot 不 存在 ， 
则 是 默认 插 模 的 内 容 ， 则 把 对 应 的 _ child 添加 到 slots.defaults 中 。 这 样 就 获取 到 整个 
slots ， 它 是 一 个 对 象 ， key 是 插 槽 名 称 ， value 是 一 个 _vnode 类 型 的 数组 ， 因 为 它 可 以 有 多 
个 同名 插 模 。 


这 样 我 们 驶 拿 到 了 vm.$slots 了 ， 回 到 renderSlot 丁 数 ， const SlotNodes = 
this.$slots[name] ， 我 们 也 就 能 根据 播 模 名 称 获 取 到 对 应 的 _vnode 数组 了 ， 这 个 数组 里 的 
vnode 都 是 在 父 组 件 创建 的 ， 这 样 就 实现 了 在 父 组 替换 子 组 件 插 槽 的 内 容 了 。 


对 应 的 slot 泻 染 成 vnodes ， 作 为 当前 组 件 演 染 vnode 的 children ， 之 后 的 泻 染 过 程 之 前 分 
析 过 ， 不 再 痪 述 。 


我 们 知道 在 普通 插 槽 中 ， 父 组 件 应 用 到 子 组 件 插 槽 里 的 数据 都 是 绑 定 到 父 组 件 的， 因为 它 演 染 成 
vnode 的 时 机 的 上 下 文 是 父 组 件 的 实例 。 但 是 在 一 些 实 际 开发 中 ， 我 们 想 通 过 子 组 件 的 一 些 数据 来 
决定 父 组 件 实现 插 覃 的 逻辑 ，Vue 提供 了 另 一 种 揪 槽 一 一 作用 域 播 槽 ， 接 下 来 我 们 就 来 分 析 一 下 它 的 
实现 原理 。 


作用 域 揪 村 


为 了 更 加 直观 ， 我 们 也 是 通过 一 个 例子 来 分 析 作 用 域 播 槽 的 实现 : 


let Child = 六 

tempJlate: '<div class="chIild"> ”+ 
<SlotEtext= Nellio msg msog 二 <Aslot> 
"</div> '， 
data() 

return 疙 

msg: "Vue' 

】} 

】} 


Jet vm = new Vue({ 
el: “"'#app '， 
template: "<div> ”+ 
Caiq 这 
"<temp1late Slot-Sscope="props"> ”+ 
ED>=NellioEficomgparienm 攻 sp 之 三 二 
DTUpropsacextripropssmsg 让 让 二 扩 D 二 二 
"<V/tempJate> ”十 
站 可可 之 和 
ELV 二 
Components: 六 
Child 
】 
]) 


最 终生 成 的 DOM 结构 如 下 : 


<diVv> 
<div class="child"> 
<p>HeJlJlo from parent</p> 
<p>HeJlJlo Vue</p> 
</div> 
</div> 


我 们 可 以 看 到 子 组 件 的 slot 标签 多 了 text 属性 ， 以 及 :msg 属性 。 父 组 件 实现 插 模 的 部 分 多 了 
一 个 template 标签 ， 以 及 scope-slot 属性 ， 其 实在 Vue 2.5+ 版 本 ， scoped-slot 可 以 作用 在 
普通 元 素 上 。 这 些 就 是 作用 域 插 槽 和 普通 插 槽 在 写法 上 的 差别 。 


在 编译 阶段 ， 仍 然 是 先 编译 父 组 件 ， 同 样 是 通过 processslot 本 数 去 处 理 scoped-slot ， 它 的 定 
义 在 在 src/compiler/parser/index.js 中 : 


function processSlot (el) 六 


2 
Jet S1LotScope 
If (el.tag === 'template') 攻 


SlotScope = getAndRemoveAttr(el， ' scope ') 

SEEamouleigmOSET 

If (process.env.NODE_ENV !== ' production' && SlotScope) 

warn( 

cnea scopen attrbutenioscopedeslokcsahnavenbeenaedeprecateoEand et 
ineblacedunDyanslotsscopen shce25n Tiennewi soesscopen aktthrbutce 上 
“can also be Used on plain elements in addition to <tempJLate> to ”十 
“denote scoped Slots,， 
EUe 


】} 
el,.SJotScope = SlotScope || getAndRemoveAttr(elL， Slot-scope ') 


} else if ((SlotScope = getAndRemoveAttr(e1， 'Slot-scope'))) 攻 
/* lstanbul 1Ignore 工 */ 
If (process,.env.NODE_ENV !== :production”&& el.attrsMap[ v-for ]) 攻 
warn( 

“Ambiguous combined usage of Slot-scope and v-for on <$ftel.tag}> ”上 + 
(Vs=fomitakesanngneriprrorty)usesawrapper Cemplatec>=fortnel 二 
iscopedi slot tomakeEIt clearer 
true 


】} 
el,SJotScope = SlotScope 


2 


这 块 逻辑 很 简单 ， 读 取 scoped-slot 属性 并 赋值 给 当前 AST 元 素 节 点 的 slotscope 属性 ， 接 下 来 
在 构造 AST 树 的 时 候 ， 会 执行 以 下 逻辑 : 


If (element ,elseif || element.else) { 
processIfConditions(eJlement，currentParent ) 
} else if (element.SlLotScope) 
currentParent ,plain = Talse 


const name = element .SlotTarget || default” 
; (currentParent .scopedSlots || (currentParent .scopedSlots = {))[name] = element 
Telse tf 


currentParent ,children,.push(element ) 
element .parent = currentParent 


可 以 看 到 对 于 拥有 scopedslot 属性 的 AST 元 素 节 点 而 言 ， 是 不 会 作为 children 添加 到 当前 AST 
树 中 ， 而 是 存 到 父 AST 元 素 节 点 的 scopedslots 属性 上 ， 它 是 一 个 对 象 ， 以 揪 权 名称 name 为 
key 。 


然后 在 genData 的 过 程 ， 会 对 scopedslots 做 处 理 : 


If (el,.scopedSlots) { 
data +=  “ ${genScopedSlots(el.scopedSlots，Sstate)}， 


function genScopedSJlots ( 
Slots: (人 [key: string]l:， ASTELement j 
state: CodegenState 
JSIGcada 
return `“ScopedSlots:_UuU([$1{ 
Object ,keys(SLots) ,map(key => { 
return genScopedSlot(key，Slots[key]，state) 
j) ,join( ，) 
攻 . 


function genScopedS1lot (人 
key: straing/ 
GTASTELement 
state: CodegenState 


\ 一 


Stang 匡 人 
If (el.for && !el.forProcessed) 并 
return genForScopedSlot(key，el，state) 


】 
const fn = function($tString(el1.SLotScope)}){ ”+ 
“return $tel.tag === "temp]ate' 
多 主 GilesTT 
人 中 卡 Ei 二 工人 2$fgenmchaudrenten skatcey 吕 川 Dunduefanedasundefaned 
: genChildren(elLl，state) || undefined ' 
: genElLement(elL，Sstate) 
搞 周 
return  {key:${key},，fn:$ftfn}y} 


genScopedS1lots 就 是 对 ScopedSlots 对 象 通 历 ， 执行 genScopedSjlot ， 并 把 结果 用 去 号 拼接 ， 

而 genscopedslot 是 先生 成 一 段 酚 数 代码 ， 并 且 酚 数 的 参数 就 是 我 们 的 slotscope ， 也 就 是 写 在 
标签 属性 上 的 scoped-slot 对 应 的 值 ， 然 后 再 返回 一 个 对 象 ， key 为 播 槽 名 称 ， fn 为 生成 的 范 
数 代码 。 


对 于 我 们 这 个 例子 而 言 ， 父 组 件 最 终生 成 的 代码 如 下 : 


with(this){ 
ReuEnesc (全 QTVIE 
芽 cacnaldo 
{scopedSlots:_u([ 


{ 
key: ”default”"， 


fnsatunctron(propsy 匡 必 
returnil[ 
是 C (ED IEV HelLOEOmEDaremirtse) 训 辣 到 
_c('p [Lv(_s(Gprops,text + props,.msg) )]) 


可 以 看 到 它 和 普通 插 模 父 组 件 编译 结果 的 一 个 很 明显 的 区 别 就 是 没有 children 了 ， data 部 分 多 
了 一 个 对 象 ， 并 且 执 行 了 _ _u 方法 ， 在 编译 章节 我 们 了 解 到 ， _u 画 数 对 的 就 是 
resolveScopedSlots 方法 ， 它 的 定义 在 src/core/instance/render-hepLlpers/resolve- 
slots.js 中 : 


export function resolveScopedSlots (人 
下 ssEScopedsShiokEsDatasy secniiowvnoue 
res?:， 0bject 
)EUDKeys: stranglEFEunctIzon 
res = res || 癸 
下 or 王 ( 人 et E = DOE<EEnsElengen ac 下 
If (Array,IsArray(fns[I])) 六 
resolveScopedSlots(fns[I]，res) 
else 1{ 
res[fns[I].key] = fns[I] ,fn 


让 


return res 


其 中 ， fns 是 一 个 数组 ， 每 一 个 数组 元 素 都 有 一 个 key 和 一 个 fn ， key 对 应 的 是 插 模 的 名 
称 ， fn 对 应 一 个 本 数 。 整 个 罗 钼 就 是 通 历 这 个 fns 数组 ， 生 成 一 个 对 象 ， 对 象 的 key 就 是 插 模 
名 称 ， value 就 是 画 数 。 这 个 画 数 的 执行 时 机 稍 后 我 们 会 介绍 。 

接着 我 们 再 来 看 一 下 子 组 件 的 编译 ， 和 普通 插 模 的 过 程 基本 相同 ， 唯 一 一 点 区 别 是 在 genslot 的 时 


候 : 


functcriondenSlottel ASTELement statescodegenstatej)E strangEE{ 
const SlotName = el.SJlotName || default”' 
const children = genCchildren(el，Sstate) 


let res = t($tslotName}y$tchildren 2  ,${tchildren :小 
const attrs = el.attrs &&  {${tel.attrs.map(a => “ $tcameJlize(a.name)}:$ta.value} ) 
.join( ，)) 


const bind = el,attrsMap['v-bind '] 
已 全 | 二 坝 本 CIChadrenym 必 
res += ,nul]- 
下 
人 (as 人 是 
res += 7/$ftattrs} 


引 
DLLDIGN 琶 人 
resi += $tattrs 2 ”null 入 $ibind 
了 
[区 2 本 亲 RI =) 有 


它 会 对 attrs 和 v-bind 做 处 理 ， 对 应 到 我 们 的 例子 ， 最 终生 成 的 代码 如 下 : 


with(this){ 
eunneEsCiOVEE 
{StaticClass:"child"}， 
芽 E 人 duefault nu 
{text: "Hello "msg:msg} 
)] ， 


2)} 


_t 方法 我 们 之 前 介绍 过 ， 对 应 的 是 renderslot 方法 : 


export function renderSlot (人 
nane: sndg 
fallback: ?Array<VNode>， 
propsse2opbJects 
bindobject: ?0bJject 

): ?Array<VNode> 于 


const ScopedSlotFn = this.$scopedSlots[name] 


let nodes 

If (scopedS1LotFn) 攻 
props = props || 合 
If (bindobject) 攻 


If (process.env.NODE_ENV !== 'production”&& !isobject(bindobject)) 攻 


warn( 


"Slot v-bind without argument expects an Object '， 


thIs 


】} 


props = extend(extend({}，bindobject)，props ) 


】} 

nodes = ScopedSlotFn(props) || fallback 
Telse tf 

人 


const target = props && props.Slot 
If (target) 区 

return this,$createEJlement( 'temp1late '， 
Telse ef 

return nodes 


{ Slot: target }， 


我 们 只 关注 作用 域 插 槽 的 逻辑 ， 那 么 这 个 this.$scopedslots 又 是 在 什么 地 方 定义 的 呢 ， 原 来 在 子 


组 件 的 浑 染 丁 数 执行 前 ， 在 vm_render 方法 内 ， 有 这 么 一 段 逻 辑 ， 定 义 在 


src/core/instance/render.js 中 : 


If (_parentVnode) 攻 


vm.$scopedSlots = _parentVnode.data.scopedSlots || empty0Object 


这 个 _parentVNode.data.scopedSlots 对 应 的 就 是 我 们 在 父 组 件 通 过 执行 resolveSscopedSlots 
返回 的 对 象 。 所 以 回 到 genslot 画 数 ， 我 们 就 可 以 通过 插 槽 的 名 称 拿 到 对 应 的 scopedSlotFn ， 
后 把 相关 的 数据 扩展 到 props 上 ， 作 为 本 数 的 参数 传人 ， 原 来 之 前 我 们 提 到 的 函数 这 个 时 候 执行 ， 


然后 返回 生成 的 vnodes ， 为 后 续 泻 染 点 用 。 


然 


IT 


后 续 流 程 之 前 已 介绍 过 ， 不 再 约 述 ， 那 么 至 此 ， 作 用 域 揪 槽 的 实现 也 就 分 析 完 毕 。 


总 结 


通过 这 一 章 的 分 析 ， 我 们 了 解 了 普通 插 槽 和 作用 域 插 模 的 实现 。 它 们 有 一 个 很 大 的 差别 是 数据 作用 
域 ， 普 通 插 棍 是 在 父 组 件 编译 和 浑 染 阶段 生成 vnodes ， 所 以 数据 的 作用 域 是 父 组 件 实例 ， 子 组 件 泻 
染 的 时 候 直接 拿 到 这 些 演 染 好 的 vnodes 。 而 对 于 作用 域 插 槽 ， 父 组 件 在 编译 和 浑 染 阶段 并 不 会 直接 
生成 vnodes ， 而 是 在 父 节 点 vnode 的 data 中 保留 一 个 _ scopedslots 对 象 ， 存 储 着 不 同名 称 
的 插 模 以 及 它们 对 应 的 演 染 范 数 ， 只 有 在 编译 和 泻 染 子 组 件 阶段 才 会 执行 这 个 演 染 函数 生成 

vnodes ， 由 于 是 在 子 组 件 环境 执行 的 ， 所 以 对 应 的 数据 作用 域 是 子 组 件 实例 。 


简单 地 说 ， 两 种 插 槽 的 目的 都 是 让 子 组 件 slot 占 位 符 生成 的 内 容 由 父 组 件 来 决定 ， 但 数据 的 作用 域 
会 根据 它们 vnodes 浑 染 时 机 不 同 而 不 同 。 


keep-alive 


在 我 们 的 平时 开发 工作 中 ， 经 常 为 了 组 件 的 缓存 优化 而 使 用 <keep-alive> 组 件 ， 乐 此 不 疫 ， 但 很 少 
有 人 关注 饭 的 实现 原理 ， 下 面 台 让 我 们 来 一 探 完 竟 。 


内 置 组 件 


<keep-alive> 是 Vue 源码 中 实现 的 一 个 组 件 ， 也 就 是 说 Vue 源码 不 仅 实 现 了 一 套 组 件 化 的 机 制 ， 也 
实现 了 一 些 内 置 组件 ， 它 的 定义 在 src/core/components/keep-alive.js 中 : 


export default { 
name: "keep-alive， 
abstract: true， 


props: 荆 
Include: patternTypes， 
exclude: patternTypes， 
max: [String，Number] 


} 


created () 革 
thlis,cache = 0bject.create(nul1) 
thlis,.keys = [ 

】， 


destroyed () 攻 
for (const key in this.cache) { 
pruneCacheEntry(this,.cache，Kkey，this.keys) 
】} 
】， 


mounted () 
this.$watch(' include'"，Vval => 攻 
pruneCache(this，name => matches(val，name) ) 
了 ) 
this.,$watch('exclude'，Vval => 区 
pruneCache(this，name => !matches(val，name) ) 
了]) 
}， 


render () { 
const Slot = this.$slots.defauJ]t 
const vnode: VNode = getFirstComponentChild(slot) 
const componentoptions: ?VNodecomponentoptions = vnode && vnode,. componentoption 


二 (componentoptions) { 
// check pattern 


const name: ?String = getCcomponentName(componentOptions ) 
const { include，exclude } = this 
工 全 ( 

// not included 

(include && (!name || !matches(include，name))) | 

// excluded 

(exclude && name && matches(exclude，name) ) 


) 【 


return vnode 


const { cache，keys }》 = this 
const key: ?String = vnode.key == _ nu]1 
// same constructor may get registered as different Local components 
// So cid alone is not enough (#3269 ) 
? componentoptions,Ctor.cid + (componentoptions ,tag ? ` ::$tcomponentOptions 
tag :7) 
: Vvnode ,key 
If (cache[key]) 革 
vnode,. componentInstance = cache[key].componentInstance 
// make current key freshest 
remove(keys，key ) 
keys,.push(key) 
else { 
cache[key] = vnode 
keys,.push(key) 
// prune 01ldest entry 
If (this.max && keys.length > parseInt(this .max)) 革 
pruneCacheEntry(cache，keys[0]，keys，this.,_vnode) 


vnode ,data.keepAlive = true 


】} 
return vnode || (Slot && Slot[9]) 


可 以 看 到 <keep-alive> 组 件 的 实现 也 是 一 个 对 象 ， 注 意 它 有 一 个 属性 abstract 为 true， 是 一 人 
抽象 组 件 ，Vue 的 文档 没有 提 这 个 概念 ， 实 际 上 它 在 组 件 实例 建立 父子 关系 的 时 候 会 被 忽略 ， 发 生 在 
initLifecycle 的 过 程 中 : 


LOcaEeEfa 


te TIrst non-apstract parent 
let parent = options,.parent 
If (parent && !options.abstract) 于 
while (parent ,$options ,abstract && parent .$parent ) 1{ 
parent = parent .$parent 


】} 
parent .,$children.push(vm) 


Vvm.$parent = parent 


<keep-alive> 在 created 钩子 里 定义 了 this.cache 和 this.keys ， 本 质 上 它 就 是 去 缓存 已 
经 创建 过 的 vnode 。 它 的 props 定义 了 include ， exclude ， 它 们 可 以 字符 串 或 者 表达 

式 ， include 表示 只 有 匹配 的 组 件 会 被 缓存 ， 而 exclude 表示 任何 匹配 的 组 件 都 不 会 被 组 

存 ， props 还 定义 了 max ， 它 表示 缓存 的 大 小 ， 因 为 我 们 是 缓存 的 vnode 对 象 ， 它 也 会 持 有 
DOM， 当 我 们 缓存 很 多 的 时 候 ， 会 比较 占用 内 存 ， 丙 以 该 配置 允许 我 们 指定 缓存 大 小 。 


<keep-alive> 直接 实现 了 render 画 数 ， 而 不 是 我 们 利 规模 板 的 方式 ， 执 行 <keep-alive> 组 件 
泻 染 的 时 候 ， 就 会 执行 到 这 个 render 画 数 ， 接 下 来 我 们 分 析 一 下 它 的 实现 。 


首先 获取 第 一 个 子 元 素 的 vnode 


const Slot = this.$slots,defauJ]t 
const vnode: VNode = getFirstComponentChild(slot) 


由 于 我 们 也 是 在 <keep-alive> 标签 内 部 写 DOM， 所 以 可 以 先 获取 到 它 的 默认 插 槽 ， 然 后 再 获取 到 
它 的 第 一 个 子 节点 。 <keep-alive> 只 处 理 第 一 个 子 元 素 ， 所 以 一 般 和 马 搭配 使 用 的 有 component 
动态 组 件 或 者 是 router-view ， 这 点 要 牢记 。 


然后 又 判断 了 当前 组 件 的 名 称 和 include 、 exclude 的 关系 : 


// check pattern 
const name: ?String = getComponentName(componentOptions ) 
const { include，exclude } = this 
了 丰县 ( 
// not included 
(include && (!name || !matches(include，name))) || 
// excluded 
(exclude && name && matches(excJude，name ) ) 


) 荆 


return Vvnode 


UTCtionmatchnes 硬 (Packernneserangill 上 REOEXP 避 IEEAray<s 二 ng namesestrngjaooorean 
{ 
If (Array.IsArray(pattern)) 
return pattern.indexof(name) > - 工 
} else if (typeof pattern === "String'") { 
return pattern.Split('，).indexof(name) > - 工 
} else If (IsSRegEXxp(pattern)) 攻 
return pattern.test(name ) 


return false 


matches 的 逻辑 很 简单 ， 就 是 做 匹配 ， 分 别处 理 了 数组 、 字 符 串 、 正 则 表达 式 的 情况 ， 也 就 是 说 我 
们 平时 传 的 include 和 exclude 可 以 是 这 三 种 类 型 的 任意 一 种 。 并 且 我 们 的 组 件 名 如 果 满 足 了 配 
冒 include 且 不 匹配 或 者 是 配置 了 exclude 且 匹 配 ， 那 么 就 直接 返回 这 个 组 件 的 _vnode ， 否 则 
的 话 走 下 一 步 缓存 : 


const { cache，keys } = this 
const key: ?string = vnode,key == nul1 
// same constructor may get registered as different local components 
// So cid alone ls not enough (#3269 ) 
? componentoptions,Ctor.cid + (componentoOptions .tag ?  ::$ftcomponentoOoptions .tag} 
四 
: vnode .key 
If (cache[key]) { 
Vvnode.componentInstance = cache[key].componentInstance 
// make current Key freshest 
remove(keys， key ) 
keys,push(key) 
else 
cache[key] = vnode 
keys,push(key) 
// prune oldest entry 
if (this,max && keys. length > parseInt(this.max)) 苹 
pruneCacheEntry(cache，Kkeys[0]，keys，this, vnode) 


这 部 分 逻辑 很 简单 ， 如 果 命 中 缓存 ， 则 直接 从 缓存 中 拿 vnode 的 组 件 实例 ， 并 且 重 新 调整 了 key 的 
顺序 放 在 了 最 后 一 个 ; 否则 把 vnode 设置 进 缓存 ， 最 后 还 有 一 个 逻辑 ， 如 果 配 置 了 max 并 且 缓 存 
的 长 度 超过 了 this .max ， 还 要 从 缓存 中 删除 第 一 个 : 


function pruneCacheEntry (人 
cache: VNodeCache， 
key: Stringr 
keys: Array<String>， 
current?2: VNode 


) 
const cached = cache[key] 
If (cached && (!current || cached.tag !== current .tag)) 革 


cached . componentInstance.$destroy() 


】} 
cache[key] = _ nu]l 


remove(keys， key ) 


除了 从 缓存 中 删除 外 ， 还 要 判断 如 果 要 删除 的 缓存 并 的 组 件 tag 不 是 当前 演 染 组 件 tag ， 也 执行 
删除 缓存 的 组 件 实 例 的 $destroy 方法 。 


最 后 设置 vnode,.data.keepAlive = true ， 这 个 作用 稍 后 我 们 介绍 。 


注意 ， <keep-alive> 组 件 也 是 为 观测 include 和 exclude 的 变化 ， 对 缓存 做 处 理 : 


Watch: 荆 
IncJlude (val: string | RegExp | Array<string>) 革 
pruneCache(this，name => matches(val，name) ) 
}， 
exclude (val: string | RegEXxp | Array<Sstring>) 革 
pruneCache(this，name => !matches(val，name) ) 


function prunecache (keepAliVeInstance any filter Function) 
const { cache，keys，_Vvnode } = keepAliveInstance 
for (const key in cache) 六 
const cachedNode: ?VNode = cache[key] 
If (cachedNode ) 攻 


const name: ?string = getComponentName(cachedNode .componentOptions ) 
If (name && !filter(name)) 攻 
pruneCacheEntry(cache，key，keys，_Vvnode ) 


逻辑 很 简单 ， 观 测 他 们 的 变化 执行 prunecache 本 数 ， 其 实 就 是 对 _ cache 做 逼 历 ， 发 现 缓存 的 节点 
名 称 和 新 的 规则 没有 匹配 上 的 时 候 ， 就 把 这 个 缓存 节点 从 缓存 中 摘除 。 


组 件 放 染 


到 此 为 上 上， 我 们 只 了 解 了 <keep-alive> 的 组 件 实现 ， 但 并 不 知道 它 包 囊 的 子 组 件 泻 染 和 普通 组 件 有 
什么 不 一 样 的 地 方 。 我 们 关注 2 个 方面 ， 首 次 泻 染 和 缓存 泻 染 。 


同样 为 了 更 好 地 理解 ， 我 们 也 结合 一 个 示例 来 分 析 : 


Jet A = 并 
tempJlate: '<div class="a"> ”+ 
"<p>A Comp</p> "+ 


TV 
name: 'A'" 
Jet B = 并 


tempJlate: "<div class="b"> ”十 
"<p>B Comp</p> ”+ 
ONV 


name: 'B' 


let vm = new Vue({ 


elL: '#app. 

tempJlate: "<div> ”+ 

"<keep-alive> "十 

"<Component :Is="currentComp"> ”+ 
"</Vcomponent> ”十 

"</Kkeep-alive> ”+ 

"<button @c1lick="change">Sswitch</button> ”+ 


[olNA 

data: 荆 
currentComp: 'A- 

】 

methods: 攻 
change() 攻 

this,currentComp = this.currentComp === 'A' ?3 'B' :2A 

】} 

}， 

Components: 
A， 
B 

】} 

了 ) 
首次 泻 染 


我 们 知道 vue 的 谊 染 最 后 都 会 到 patch 过 程 ， 而 组 件 的 patch 过 程 会 执行 createcomponent 方 
法 ， 它 的 定义 在 src/core/vdom/patch.js 中 : 


function createCcomponent (vnode，insertedvnodeQueue，parentEJm，refEJm) 攻 
Jet 工 = vnode,.data 
If (IsDef(I)) 蕊 
const IsSReactivated = IsDef(vnode.componentInstance) && 1 工 .keepAJive 
If (isDef(I = I.hook) && IsDef(I = 工 .Init)) { 
I(vnode，false /* hydrating */) 


// after calling the init hook，if the vnode ls a child component 
ETEESimouldeveacreaceuEaacnidunseancerandimnmouncedEkesaenechnaldg 
// component also has Set the placeholder vnode's eln. 

// jn that case we can just return the element and be done， 

If (isDef(vnode.componentInstance)) { 
initComponent(vnode，insertedVvnodeQueue ) 
Insert(parentElm，vnode.elm，refE1lLm) 

If (isTrue(ISReactivated) ) 荆 
reactivateCcomponent(vnode，jinsertedvnodeQueue，parentE1lm，refEJlm) 


】} 


retunrn 卡 rue 


createCcomponent 定义 了 isReactivated 的 变量 ， 它 是 根据 vnode .componentInstance 以 及 
vnode.data.keepAlive 的 判断 ， 第 一 次 泻 染 的 时 候 ， vnode.componentInstance 为 
undefined ， Vvnode.data.keepAlive 为 true， 因为 它 的 父 组 件 <keep-alive> 的 render 画 数 
会 先 执 行 ， 那 么 该 vnode 缓存 到 内 存 中 ， 并 且 设 置 vnode.data.keepAlive 为 true， 因 此 
isReactivated 为 false ， 那 么 走 正 常 的 init 的 钧 子 函 数 执行 组 件 的 mount 。 当 vnode 已 
经 执行 完 patch 后 ， 执 行 initcomponent 画 数 : 


function initComponent (vnode，insertedvnodeQueue ) 革 

if (IsDef(vnode.data.pendingInsert )) { 
insertedvnodeQueue .push.apply(insertedVvnodeQueue，vnode.data.pendingInsert ) 
vnode.data.pendingInsert = _ null 

】} 

Vvnode.elm = vnode.componentInstance .$e] 

If (IsPatchable(vnode)) 革 
InvokecCcreateHooks(vnode，insertedvnodeQueue ) 
SetScope(vnode ) 

Telsee 
// empty component root ， 

// Skip all1 element-related modules except for ref (#3455) 
registerRef(vnode ) 

// make Sure to invoke the Insert hook 

InsertedVvnodeQueue .push(vnode ) 


这 里 会 有 vnode.elm 缓存 了 vnode 创建 生成 的 DOM 节点 。 所 以 对 于 首次 泻 染 而 言 ， 除 了 在 
<keep-alive> 中 建立 缓存 ， 和 普通 组 件 泻 染 没 什么 区 别 。 


所 以 对 我 们 的 例子 ， 初 始 化 泻 染 A 组 件 以 及 第 一 次 点 击 switch 演 染 B 组 件 ， 都 是 首次 浑 染 。 


缓存 泻 染 


当 我 们 从 B 组 件 再 次 点 击 switch 切换 到 A 组 件 ， 束 会 命中 缓存 演 染 。 


我 们 之 前 分 析 过 ， 当 数据 发 送 变 化 ， 在 _ patch 的 过 程 中 会 执行 patchvnode 的 逻辑 ， 它 会 对 比 新 | 
vnode 节点 ， 基 至 对 比 它 们 的 子 节点 去 做 更 新 逻辑 ， 但 是 对 于 组 件 vnode 而 言 ， 是 没有 
children 的 ， 那 么 对 于 <keep-alive> 组 件 而 言 ， 如 何 更 新 它 包 庄 的 内 容 呢 ? 


LU 


原来 patchvnode 在 做 各 种 diff 之 前 ， 会 先 执 行 prepatch 的 钩 子 函 数 ， 它 的 定义 在 


src/core/vdom/ycreate-component 中 : 


const componentVNodeHooks = { 
prepatch (oldvnode: MountedCcomponentVNode，vnode: MountedComponentVNode ) 革 
const options = vnode.componentoptions 
const child = vnode,.componentInstance = 01dvnode.componentInstance 
updatechildCcomponent( 
child， 
options.propsData，// updated props 


options.1isteners，// updated listeners 
Vvnode，// new parent vnode 
options,children // new children 


}， 
// 


prepatch 核心 逻辑 就 是 执行 updatechildcomponent 方法 ， 它 的 定义 在 


src/core/instance/lifecycle.js 中 : 


export function updatechildcomponent (人 
Vvm: Component， 
propSsData: ?0bject， 
isteers 20bpJecE， 
parentVnode: MountedCcomponentVNode， 
renderChildren: ?Array<VNode> 
) 荆 
const hasCchildren = !!( 
renderCchildren || 
vm,$options,_renderchildren | | 
parentVvVnode .data.scopedSlots || 
Vvm,$scopedSlots !== emptyobJject 


0 

If (haschildren) 区 
vm,$slots = resolveSlots(renderChildren，parentVnode ,context ) 
vm,$forceUpdate() 


updatechildcomponent 方法 主要 是 去 更 新 组 件 实 例 的 一 些 属性 ， 这 里 我 们 重点 关注 一 下 _ slot 部 
分 ， 由 于 <keep-alive> 组 件 本 质 上 支持 了 slot ， 所 以 它 执行 prepatch 的 时 候 ， 需 要 对 自己 的 
children ， 也 就 是 这 些 slots 做 重新 解析 ， 并 触发 <keep-alive> 组 件 实例 $forceupdate 逻 
辑 ， 也 就 是 重新 执行 <keep-alive> 的 render 方法 ， 这 个 时 候 如 果 它 包 囊 的 第 一 个 组 件 _vnode 
命中 缓存 ， 则 直接 返回 缓存 中 的 vnode.componentInstance ， 在 我 们 的 例子 中 就 是 缓存 的 A 组 

件 ， 接着 又 会 执行 patch 过 程 ， 再 次 执行 到 createCcomponent 方法 ， 我 们 再 回顾 一 下 : 


function createCcomponent (vnode，jinsertedvnodeQueue，parentElm，refEJIm) 攻 
let 工 = vnode,data 
if (isDef(i)) 苹 
const IsReactivated = IsDef(vnode.componentInstance) && 工 .keepAJive 
If (isDef(I = .hook) && IsDef(1I = ,init)) 攻 
I(vnode，Tfalse /* hydrating */) 
} 
// after calling the init hook，if the vnode ls a child component 
ATEEESImouldeveacreateuaacnmiaunsecanceandmouncedtesatneechnald 


// component also has set the placeholder vnode 's eln. 

// in that case we can just return the element and be done. 

If (isDef(vnode.componentInstance)) { 
initComponent(vnode，insertedVvnodeQueue ) 
insert(parentEJm，vnode.eJlm，refEJm) 

If (isTrue(ISReactivated)) 革 
reactivatecomponent(vnode，insertedVvnodeQueue，parentElm，refEJlm) 


】} 


retunn true 


这 个 时 候 isReactivated 为 true， 并 且 在 执行 init 钩子 函数 的 时 候 不 会 再 执行 组 件 的 mount 过 
程 了 ， 相 关 逻 辑 在 src/core/vdom/ycreate-component .js 中 : 


const componentVNodeHooks = { 
init (vnode: VNodewWithData，hydrating: boolean): ?boolean 攻 
人 ( 
vnode,. componentInstance && 
!vnode .componentInstance._ isDestroyed && 
vnode ,data.keepAlLive 
) 
// kept-alive components，treat as a_ patch 
const mountedNode: any = vnode // work around flow 
componentVNodeHooks .prepatch(mountedNode，mountedNode ) 
Jelse 1{ 
const child = vnode.componentInstance = createCcomponentInstanceForvnode( 


Vvnode， 
activeInstance 
) 
child,.$mount(hydrating ? vnode.elm : undefined，hydrating) 
】 
] 
2 


这 也 就 是 被 <keep-alive> 包 囊 的 组 件 在 有 缓存 的 时 候 就 不 会 在 执行 组 件 的 created 、 mounted 
等 钧 子 函 数 的 原因 了 。 回 到 createcomponent 方法， 在 isReactivated 为 true 的 情况 下 会 执行 
reactivateComponent 方法 : 


function reactivateCcomponent (vnode，insertedvnodeQueue，parentEJm，refEJlm) 攻 
let 工 
// hack for #4339: a reactivated component with inner transition 
// does not trigger because the inner node's created hooks are not called 
// again， It's not ideal to involve module-specific logic in here but 
// there doesn't Seem to be a better way to do it.， 
let innerNode = vnode 
while (innerNode.componentInstance) 于 


InnerNode = innerNode.componentInstance._vnode 
If (isDef(I = innerNode.data) && IsDef(I = Itransition)) 革 
for (= 0;) 工 < cbs.activate. Jength; ++I) 
cbs ,activate[I](emptyNode，innerNode) 


】} 


insertedvnodeQueue .push(innerNode) 
break 


j 


// un1like a newly created component， 
// a reactivated keep-alive component doesn't insert Itself 
insert(parentEJm，Vvnode.elm，refEJlm) 


前 面部 分 的 逻辑 是 解决 对 _ reactived 组 件 transition 动画 不 触发 的 问题 ， 可 以 先 不 关注 ， 最 后 通 
过 执行 insert(parentElm，vnode.elm，refElm) 束 把 缓存 的 DOM 对 象 直 接 插 人 到 目标 元 素 中 ， 
这 样 就 完成 了 在 数据 更 新 的 情况 下 的 滨 染 过 程 。 


生命 周期 


之 前 我 们 提 到 ， 组 件 一 旦 被 <keep-alive> 缓存 ， 那 么 再 次 泻 染 的 时 候 就 不 会 执行 

created 、 mounted 等 钩子 函数 ， 但 是 我 们 很 多 业务 场景 都 是 布 望 在 我 们 被 缓存 的 组 件 再 次 被 泻 染 
的 时 候 做 一 些 事 情 ， 好 在 Vue 提供 了 activated 钩子 函数 ， 它 的 执行 时 机 是 <keep-alive> 包 庄 
的 组 件 演 染 的 时 候 ， 接 下 来 我 们 从 源码 角度 来 分 析 一 下 它 的 实现 原理 。 


在 泻 染 的 最 后 一 步 ， 会 执行 InvokeInsertHook(vnode，ijinsertedvnodeQueue，isInitialPatch ) 
函数 执行 vnode 的 insert 钩子 函数 ， 它 的 定义 在 src/core/vdom/ycreate-component .js 中 : 


const componentVNodeHooks = { 
insert (vnode: MountedCcomponentVNode) { 
const { context，componentInstance } = vnode 
If (!componentInstance,_ IsMounted) 攻 
componentInstance,_ isMounted = true 
calJIHook(componentInstance， mounted ' ) 
】} 
If (vnode.data.keepAlive) 攻 
If (context._ IsMounted) 攻 
// vue-router#1212 
// During updates，a kept-alive component 's child components may 
// change，Sso directly walking the tree here may call activated hooks 
// on incorrect children，Instead we push them into a queue which will 
// be processed after the whole patch process ended . 
queueActivatedComponent(componentInstance) 
elseEt 
activatechildCcomponent(componentInstance，true /” direct */) 


}， 


光 


这 里 判断 如 果 是 被 <keep-alive> 包 右 的 组 件 已 经 mounted ， 那 么 则 执行 
queueActivatedComponent(componentInstance) ， 否则 执行 
activatechildCcomponent (componentInstance，true) 。 我 们 先 分 析 非 mounted 的 情 

况 ， activatechildcomponent 的 定义 在 src/core/instance/lLifecycle.js 中 : 


export function activatechildCcomponent (vm: Component，direct?3: boolean) 1{ 
If (direct) 区 
vm,_directInactive = Talse 
if (isInInactiveTree(vm) ) 苹 


Eeeurn 
】} 
} else if (vm.,_ directInactive) 攻 
return 
】} 
If (vm,_inactive || vm,_inactive === nul1) 革 
Vvm,_inactive = false 
for (let IL =0; 工 < vm.$children.1Llength; i++) 六 
activatechildcomponent(vm.$children[iI]) 
】} 
CallIHook(vm， 'activated ' ) 
】} 
】} 


可 以 看 到 这 里 就 是 执行 组 件 的 acitvated 钩子 范 数 ， 并 且 递 娄 去 执行 它 的 所 有 子 组 件 的 
activated 钩子 函数 。 


那么 再 看 queueActivatedcomponent 的 逻辑 ， 它 定义 在 src/core/observer/scheduler .js 中 : 


export function queueActivatedCcomponent (vm: Component ) 攻 
vm._inactive = false 
activatedCchildren.push(vm) 


这 个 逻辑 很 简单 ， 把 当前 vm 实例 添加 到 activatedchildren 数组 中 ， 等 所 有 的 泻 染 完 毕 ， 在 
nextTick 后 会 执行 flushschedulerQueue ， 这 个 时 候 就 会 执行 : 


functaionm flushschedulerQueue () 
7 
const activatedQueue = activatedCchildren.slice() 
calJlActivatedHooks(activatedQueue ) 
7 


function calJlActivatedHooks (queue) 并 
for (let 工 = 0;) 工 < queue.length; I++) 并 


dueue[I]._inactive = true 


activatechildcomponent (queue[i]，true) } 


也 就 是 还 历 所 有 的 activatedchildren ， 执 行 activatechildcomponent 方法 ， 通 过 队列 调 的 方 
式 就 是 把 整个 activated 时 机 延 后 了 。 


有 activated 钩子 函数 ， 也 就 有 对 应 的 deactivated 钩子 函数 ， 它 是 发 生 在 vnode 的 
destory 钩子 函数 ， 定义 在 srcVcore/vdom/vcreate-component .js 中 : 


const componentVNodeHooks = 二 


destroy (vnode: MountedCcomponentVNode ) 革 
const { componentInstance } = vnode 
If (!componentInstance,_ isDestroyed) 并 
If (!vnode.data.keepAlive) 革 
componentInstance.$destroy() 
Telse 


deactivatechildCcomponent(componentInstance，true 人/ direct */) 


对 于 <Kkeep-alive> 包 庄 的 组 件 而 言 ， 它 会 执行 deactivatechildCcomponent(componentInstance'， 
true) 方法 ， 定 义 在 src/core/instance/lifecycle,js 中 : 


export function deactivatechildCcomponent (vm: Component，direct?: boolean) 攻 
If (direct) 六 
vm,_directInactive = true 
if (isInInactiveTree(vm) ) 苹 
return 


】 
If (!Vm,_inactive) 
vm,_ inactive = true 


for (let IL= 0;) 工 < vm,.$children.Jlength;y I++) { 


deactivatechildCcomponent(vm,.$children[I]) 
】} 


callLHook(vm， 'deactivated ' ) 


和 activatechildcomponent 方法 类 似 ， 就 是 执行 组 件 的 deacitvated 钩子 范 数 ， 并 且 递 娄 去 执 
行 它 的 所 有 子 组 件 的 deactivated 钩子 函数 。 


总 结 


那么 至 此 ， <keep-alive> 的 实现 原理 就 介绍 完了 ， 通 过 分 析 我 们 知道 了 <keep-alive> 组 件 是 一 


个 抽象 组 件 ， 它 的 实现 通过 自 定 义 render 本 数 并 且 利用 了 播 槽 ， 并 且 知 道 了 <keep-alive> 缓存 


Vvnode ， 了 解 组 件 包 于 
组 件 不 会 执行 mounted 


的 子 元 素 一 一 也 就 是 插 槽 是 如 何 做 更 新 的 。 且 在 patch 过 程 中 对 于 已 缓存 的 
， 所 以 不 会 有 一 般 的 组 件 的 生命 周期 本 数 但 是 又 提供 了 activated 和 


deactivated 钩子 函数 。 另 外 我 们 还 知道 了 <keep-alive> 的 props 除了 include 和 
exclude 还 有 文档 中 没有 提 到 的 max ， 它 能 控制 我 们 缓存 的 个 数 。 


transition 


在 我 们 平时 的 前 端 项 目 开 发 中 ， 经 常会 遇 到 如 下 需求 ， 一 个 DOM 点 的 插入 和 删除 或 者 是 显示 和 隐 
藏 ， 我 们 不 想 让 它 特别 生硬 ， 通 常会 考虑 加 一 些 过 渡 效 果 。 


Vue,js 除了 实现 了 强大 的 数据 驱动 ， 组 件 化 的 能 力 ， 也 给 我 们 提供 了 一 整套 过 渡 的 解决 方案 。 它 内 置 了 
<transition> 组 件 ， 我 们 可 以 利用 它 配 合 一 些 CSS3 样式 很 方便 地 实现 过 渡 动 画 ， 也 可 以 利用 它 配 
合 JavaScript 的 钧 子 函 数 实现 过 渡 动 画 ， 在 下 列 情 形 中 ， 可 以 给 任何 元 素 和 组 件 添加 entering/leaving 过 
渡 : 


。 条 件 演 染 (使 用 v-if ) 
。 条 件 展示 (使 用 v-show ) 
。 动态 组 件 

。 组 件 根 节点 


那么 举 一 个 最 简单 的 实例 ， 如 下 : 


Jet vm = new Vue({ 


Glass 冰 appi 

tempJlate: "<div Id="demo"> ”+ 

"<button VvV-on:click="show = !show">， + 
-Toggle 十 


“<V/button> ”+ 
"<transition :appear="true"” name=" fade"> ”二 
"<p VvV-If="Sshow">hel1l1o</p> ”+ 
amsatarOnmE 二 
EDV 二 
data() 区 

return 

Show: true 

】} 

】} 
]) 


.fade-enter-active，， .fade-Jeave-active { 
transition: opacity ,5S; 

】} 

.fade-enter， .fade-Jeave-to 并 
Opacity: 0; 


当 我 们 点 击 按钮 切换 显示 状态 的 时 候 ， 被 <transition> 包 右 的 内 容 会 有 过 滤 动 画 。 那 么 接 下 来 我 们 
从 源码 的 角度 来 分 析 饭 的 实现 原理 。 


内 置 组 件 


<transition> 组 件 和 <keep-alive> 组 件 一 样 ， 都 是 Vue 的 内 置 组 件 ， 而 <transition> 的 定 
义 在 src/pLatforms/web/yruntime/component/transtion.js 中 ， 之 所 以 在 这 里 定义 ， 是 因为 
<transition> 组 件 是 web 平台 独 有 的 ， 先 来 看 一 下 它 的 实现 : 


export default 1{ 
name: "transition'， 
props: transitionProps， 
abstract: truey 


render (h: Function) { 
Jet children: any = this.$slots.default 
if (!children) { 
return 


// filter out text nodes (possible whitespaces) 

children = children.filter((c: VNode) => c.tag || IsAsyncPJlaceholder(c)) 
SETESEamnboulghoOAeG ai 全 2 

if (!children,Jlength) 革 


return 

】} 

// warn mulLtiple elements 

If (process,.env.NODE_ENV !== ' production'”&& children.length > 工 ) 蕊 
warn( 


<transantaon2ncanaonlyioeusedonEaEsangeneTemnenmte Use 
asiaiO 作 三 可 太 @ 册 虽 二 汪 帮 OILsS 人 世 S 
this,$parent 


const mode: String = this.mode 


// warn Invalid mode 


If (process,.env.NODE_ENV !== :production”&& 
mode && mode !== ' In-out'&& mode !== :Out-In' 
JE 
warn( 
" Invalid <transition> mode: ' + mode， 


this.$parent 


const rawCchild: VNode = children[9] 


// if this is a component root node and the component 'S 
// parent container node also has transition，Skip . 
If (hasParentTransition(thIis.$vnode)) { 

return rawCchild 


// apply transition data to child 
// use getRealchild() to iignore abstract components e.g，keep-alive 
const child: ?VNode = getRealCchild(rawchild) 
/* Istanbul iIgnore 工 f */ 
二 (!child) 区 
return rawCchild 


If (this, Jeaving) 攻 
return placeholder(h，rawCchild) 


// ensure a key that is unidue to the vnode type and to this transition 
// component instance， This key will be used to remove pending leaving nodes 
// during entering ， 
const ld: String = ` transition-$ftthis,_uid}y- 
child.key = child.key == nul1 
? child.isCcomment 
?2 id + "comment 
Id + child.tag 
IsSPrimitive(child.key) 
? (String(child.key),.indexof(id) === 0 ? child.key : id + child,key) 
child.key 


const data: Object = (child.data || (child.data = {1)).transition = extractTran 
SitionData(this) 

const 01dRawCchild: VNode = this,_vnode 

const 01dchild: VNode = getRealchild(oldRawChild) 


// mark vV-show 
// So that the transition module can hand over the control to the directive 


If (child.data.directives && child.data.directives.some(d => d.name === "Show ') 
) 荆 
child,.data.show = true 
】} 
本 本 ( 


0JdChild && 

oldchild.data && 

!ISsSameChild(child，oldchild) && 

!11ISAsyncPlaceholder(o1ldchild) && 

// #6687 component root Is a comment node 

!(oldchild.componentInstance && oldchild,.componentInstance,_vnode,IsComment ) 
时 

// replace old child transition data with fresh one 

// important for dynamic transitionsl 

const 01ldData: 0bject = 01ldchild.data.transition = extend({}，data) 

// handle transition mode 

If (mode === out-in' ) 攻 

// return placeholder node and queue update when Leave finishes 


this,_ leaving = true 


mergeVvNodeHook(oldData， 
this,， leaving = false 


this.$forceUpdate( ) 


"afterLeave ' ， 


全 于 = 全 


了]) 
return placeholder(h，rawCchild ) 
} else if (mode === "In-out' ) 攻 


If (isAsyncPlaceholder(child)) 六 


return ol1dRawCchild 


Jet delayedLeave 


const performLeave = 


mergeVvVNodeHook(data， 
mergeVNodeHook(data， 


mergeVvVNodeHook(oldData， 


return rawchild 


() => { delayedLeave() } 
1 afterEnter 


performLeave) 


"enterCance1lled'，performLeave ) 


"delayLeave '`，Jleave => { delayedLeave Jeave }) 


<transition> 组 件 和 <keep-alive> 组 件 有 几 点 实现 类 似 ， 同样 是 抽象 组 件 ， 同样 直接 实现 


render 画 数 ， 同 样 利 用 了 默认 插 构 。 


export const transitionProps = 
name: String， 

appear: Boolean， 

css: Boolean， 

mode: String， 

type: String， 

enterClass: String， 
leaveClass: String， 
enterToClass: String， 
JeaveToClass: String， 
enterActiveClass: String， 
JeaveActiveClass: String， 
appearClass: String， 
appearActiveClass: StriIng， 
appearToClass: String， 


duration : 


这 些 配置 我 们 稍 后 会 分 析 它 们 的 作用 ， 
现 ， 


e。 处 理 children 


{ 


<transition> 组 件 非 常 灵 活 ， 支 持 的 props 非常 多 : 


[Number，String，oObject] 


<transition> 组 件 另 一 个 重要 的 就 是 render 本 数 的 


render 画 数 主要 作用 就 是 泻 染 生成 vnode ， 下 面 来 看 一 下 这 部 分 的 逻辑 。 


Jet children: any = this,$slots.default 


If (!children) 1{ 
return 


// filter out text nodes (possible whitespaces ) 

children = children,.filter((c: VNode) => c.tag || isAsyncPJlaceholder(c)) 
人 SEEanmoulergmormeE 和 

If (!children,. Jength) { 


return 

】} 

// warn mulLtiple elLlements 

If (process,env,NODE_ENV !== "production' && children. length > 工 ) 攻 
warn( 


< 了 ramsmtron>EcanonlyibewusedEonEawssingleseerenmenmtea se 二 
<ransntaonmsgroup>ifornlmskts 本 
this.$parent 


先 从 默认 插 模 中 获取 <transition> 包 右 的 子 节点 ， 并 且 判 断 了 子 节 点 的 长 度 ， 如 果 长 度 为 0， 则 直 
接 返 回 ， 否 则 判断 长 度 如 果 大 于 1， 也 会 在 开发 环境 报警 告 ， 因 为 <transition> 组 件 是 只 能 包 右 一 
个 子 节点 的 。 


e。 处 理 model 


const mode: string = this.mode 


// warn Invalid mode 


If (process,env,NODE_ENV !== "production'” && 
mode && mode !== 'in-out' && mode !== "out-in' 
) 王 人 
warn( 
'" Invalid <transition> mode: "+ mode， 
this.$parent 
) 
】} 


过 湾 组 件 的 对 mode 的 文 持 只 有 2 种 ， in-out 或 者 是 out-in 。 


e。 获 取 rawchild & child 


const rawCchild: VNode = children[9] 


// if this is a component root node and the component 'S 
// parent container node also has transition，Skip， 
If (hasParentTransition(this.$vnode)) 革 

return rawchild 


// apply transition data to child 
// use getRealchild() to ignore abstract components e.g，keep-alive 
const child: ?VNode = getRealCchild(rawCchild ) 
SEEamnogUlaagnoOe 瑟 人 和 
II (!child) { 
return rawchild 


rawChild 就 是 第 一 个 子 节点 vnode ， 接 着 判断 当前 <transition> 如 果 是 组 件 根 节点 并 且 外 面 
包 囊 该 组 件 的 容器 也 是 <transition> 的 时 候 要 跳 过 。 来 看 一 下 _hasParentTransition 的 实现 : 


function hasParentTransition (vnode: VNode): ?boolean 攻 
while ((vnode = vnode.parent)) 攻 
If (vnode.data.transition) 攻 
emn 呈 到位 UG 


因为 传人 的 是 this.$vnode ， 也 就 是 <transition> 组 件 的 占 位 vnode ， 只 有 当 它 同时 作为 根 
vnode ， 也 就 是 vm,_vnode 的 时 候 ， 它 的 parent 才 不 会 为 喷 ， 并 且 判 断 parent 也 是 
<transition> 组 件 ， 才 返回 true， vnode.data.transition 我 们 稍 后 会 介绍 。 


getRealchild 的 目的 是 获取 组 件 的 非 抽象 子 节点 ， 因 为 <transition> 很 可 能 会 包 庄 一 个 keep- 
alive ， 它 的 实现 如 下 : 


// in case the child is also an abstract component，e,g， <Kkeep-alLive> 
// we want to recursively retrieve the real component to be rendered 
function getRealCchild (vnode: ?VNode): ?VNode 并 
const compoptions: ?VNodecomponentoptions = vnode && vnode componentoOptions 
If (compoptions && compoptions .Ctor .options .abstract) 
return getRealchild(getFirstComponentChild(compoptions .children) ) 
Telse{ 
return vnode 


会 递 娄 找到 第 一 个 非 抽 象 组 件 的 _vnode 并 返回 ， 在 我 们 这 个 case 下 ， rawCchild === child 。 


e 处 理 id & data 


// ensure aa key that is unidue to the vnode type and to this translition 
// component instance，This key will be used to remove pending leaving nodes 
// during entering . 
const id: string = transition-$tthis._ uid}- 
child.key = child,.key == nuJ1l 
? child.isComment 


?3 id + "comment 
: Id + child.tag 
: IsPrimitive(child.key) 
? (String(child.key),indexof(id) === 0 ?3 child.key : id + child.key) 
: child.key 


const data: Object = (child.data || (child.data = {})).transition = extractTransitI 
onData(this) 

const oldRawCchild: VNode = this._vnode 

const oldCchild: VNode = getRealCchild(oLdRawChild) 


// mark VvV-Show 

/ESsoEEhataeneacranstronanodulescananandoveratnencontcrnolREcoenendonectaVe 

If (child.data.directives && child.data.directives.Ssome(d => d.name === "Show')) { 
child.data.show = true 


先 根据 key 等 一 系列 条 件 获 取 id ， 接 着 从 当前 通过 extractTransitionData 组 件 实例 上 提取 出 
过 滤 所 需要 的 数据 : 


export function extractTransitionData (comp: Component ): Object 1{ 
const data = {} 
const options: ComponentOoptions = comp.$options 
// props 
for (const key in options.propsData) 革 
data[key] = comp[key] 
】} 
克利 eVerikss 
// extract listeners and pass them directly to the transition methods 
const listeners: ?0bject = options,_parentListeners 
for (const key in 1Listeners) 攻 
data[cameJize(key)] = listeners[key] 


return data 


首先 是 逗 历 props 赋值 到 data 中 ， 接 着 是 有 逗 历 所 有 父 组 件 的 事件 也 把 事件 回调 赋值 到 data 
中 。 


这 样 child.data.transition 中 就 包含 了 过 滤 所 需 的 一 些 数据 ， 这 些 稍 后 都 会 用 到 ， 对 于 child 
如 果 使 用 了 _v-show 指令 ， 也 会 把 child.data,.show 设置 为 true， 在 我 们 的 例子 中 ， 得 到 的 
child.data 如 下 : 


transition: 攻 
appear: true， 
name: 'fade'， 


至 于 oldRawchild 和 oldchild 是 年 后 面 的 判断 逻辑 相关 ， 这 些 我 们 这 里 先 不 介绍 。 


transition module 


刚刚 我 们 介绍 完 <transition> 组 件 的 实现 ， 它 的 render 阶段 只 获取 了 一 些 数据 ， 并 且 返 回 了 泻 
染 的 vnode ， 并 没有 任何 和 动画 相关 ， 而 动画 相关 的 逻辑 全 部 在 


src/platforms/web/ymodules/transition,.js 中 : 


function _enter (_: any，Vvnode: VNodewWithData) 革 
If (vnode.data.show !== true) 并 
enter(vnode ) 
】} 
】} 


export default InBrowser ? 并 
Greate semte 
activate: _enter， 
remove (vnode: VNode，rm: FunctiIon) 攻 
/* Istanbul 1Ignore else */ 
If (vnode.data.show !== true) 攻 
Jeave(vnode，rm) 
elseEA 
rm( ) 


从 


在 之 前 介绍 事件 实现 的 章节 中 我 们 提 到 过 在 vnode patch 的 过 程 中 ， 会 执行 很 多 钩子 函数 ， 那 么 对 
于 过 渡 的 实现 ， 它 只 接收 了 _ create 和 activate 2 个 钧 子 函 数 ， 我 们 知道 create 钩子 函数 只 有 
当 节 点 的 创建 过 程 才 会 执行 ， 而 _ remove 会 在 节点 销毁 的 时 候 执行 ， 这 也 就 印证 了 <transition> 

必须 要 满足 v-if 、 动 态 组 件 、 组 件 根 节 点 条 件 之 一 了 ， 对 于 v-show 在 它 的 指令 的 钧 子 函 数 中 也 
会 执行 相关 逻 辑 ， 这 块 儿 先 不 介绍 。 


过 滤 动 画 提 供 了 2 个 时 机 ， 一 个 是 create 和 activate 的 时 候 提供 了 entering 进入 动画 ， 一 个 是 
remove 的 时 候 提 供 了 leaving 离开 动画 ， 那 么 接 下 来 我 们 就 来 分 别 去 分 析 这 两 个 过 程 。 


entering 
整个 entering 过 程 的 实现 是 enter 本 数 : 


export function enter (vnode: VNodewWithData，toggleDisplay: ?3() => void) 1{ 
const el: any = vnode.elm 


// call1 Leave callback now 
If (IsDef(el._ leavecb)) 革 
elL. leavecb .cance1lled = true 


el,_ JeavecCb() 


const data = resolveTransition(vnode.data.transition) 
If (isUndef(data) ) 荆 
return 


/* Istanbul 1Ignore 芽 “*/ 
If (isDef(el._enterCcb) || el.nodeType !== 1) { 
[EeeiUaDn 


const 1{ 
CSS， 
type， 
enterC]lass， 
enterToC1lass ， 
enterActiveClass， 
appearCJlass， 
appearToCJlass， 
appearActiveClass， 
beforeEnter， 
enter， 
afterEnter， 
enterCance]lled， 
beforeAppear， 
appear， 
afterAppear， 
appearCance]lled,， 
duration 

} = data 


// activeInstance will1 always be the <transition> component managing this 
// transition， one edge case to check is when the <transition> Is placed 
// as the root node of a child component ，In that case we need to check 
// <transition>'s parent for appear check. 
let context = activeInstance 
let transitionNode = activeInstance.$vnode 
while (transitionNode && transitionNode.parent) 攻 

transitionNode = transitionNode.parent 

context = transitionNode,context 


】} 
const IsSAppear = !context.,_ isMounted || !vnode.iIsRootInsert 
If (IsSAppear && !appear && appear !== ' ) 
return 
】} 


const StartClass = 1ISAppear && appearCJlass 


? appearC1lass 
enterClass 
const activeClass = ISAppear && appearActiveClass 
? appearActiveC]lass 
enterActiveClass 
const toClass = 1ISAppear && appearToC1lass 
? appearToC1lass 
enterToClass 


const beforeEnterHook = IsSAppear 
? (beforeAppear || beforeEnter ) 
beforeEnter 
const enterHook = 1ISAppear 
? (typeof appear === 'function' ? appear : enter) 
enter 
const afterEnterHook = IsSAppear 
? (afterAppear || afterEnter) 
afterEnter 
const enterCance1lledHook = IsSAppear 
? (appearCancelled || enterCance1lled ) 
enterCance11led 


const exp1licitEnterDuration: any = toNumber( 


Isobject(duration ) 
? duration.enter 
duration 

) 
If (process,.env.NODE_ENV !== "production'，&& exp1licitEnterDuration != null) 并 

checkDuration(explicitEnterDuration， "enter'，vnode) 
】} 
Const expectsCSS = css !== false && !1ISIE9 


const userwantsControl = getHookArgumentsLength(enterHook ) 


const cb = el,_enterCcb = once(() => { 

If (expectSsCSS) 革 
removeTransitionCclass(elLl，toClass) 
removeTransitionCclass(el，activeClass) 

】} 

If (cb.cancelled) 攻 
If (expectsCSS) 攻 

removeTransitionCclass(el，SstartClass) 


enterCancel11ledHook && enterCancelledHook(el) 
else 1{ 
afterEnterHook && afterEnterHook(el]) 


】 
el._enterCcb = _ nu]1 


}) 


If (!vnode.data.show) { 
// remove pending leave element on enter by injecting an insert hook 
mergeVvNodeHook(vnode， "insert '，() => 
const parent = el.parentNode 
const pendingNode = parent && parent ,_pending && parent ._pending[vnode,.key] 
If (pendingNode && 
pendingNode .tag === Vvnode ,tag && 
pendingNode.elm._ leavecCb 
) 荆 
pendingNode .elm._ leavecb() 
enterHook && enterHook(elL，cb) 


了 ) 


Vstartenter tranmsitaon 

beforeEnterHook && beforeEnterHook(el]) 

If (expectSsCSS) 区 
addTransitionCclass(el，SstartClass ) 
addTransitionCclass(el，activeClass) 
nextFrame(() => 革 

removeTransitionCclass(el，SstartClass) 
If (!cb,cancelled) 
addTransitionCclass(el，toCclass) 
If (!userwWantSsControl) 
If (isValidDuration(exp]licitEnterDuration)) { 
SetTimeout(cb，exp]licitEnterDuration) 
el se 
whenTransitionEnds(el，type，cb) 


了]) 


If (vnode.data.show) 区 
toggleDisplay && toggleDisplay() 
enterHook && enterHook(el，cb) 


If (!expectsCSS && !userwWantsControl) 
cb () 


enter 的 代码 很 长 ， 我 们 移 分 析 其 中 的 核心 逻辑 。 
。 解析 过 渡 数 据 


const data = resolveTransition(vnode.data.transition) 


If (isUndef(data)) 区 
Retun 


const { 
CSS， 
type， 
enterCJlass ， 
enterToCJlass， 
enterActiveClass， 
appearClass， 
appearToCJlass， 
appearActiveC1lass， 
beforeEnter， 
enter， 
afterEnter， 
enterCancel1led， 
beforeAppear， 
appear， 
afterAppear， 
appearCance]lled,， 
duration 

} = data 


从 vnode.data,.transition 中 解析 出 过 渡 相 关 的 一 些 数 据 ， resolveTransition 的 定义 在 


src/platforms/web/transition-util.js 中 : 


expopreitunetaonresoverransmnton(duef22sktranmgilobJectysi2o0bgecte 攻 


If (!def) 并 
return 
】} 
/* Istanbul iIignore else */ 
If (typeof def === 'object ') 攻 
const res = 全 
If (def.css !== false) 革 
extend(res，autoCcssTransition(def.name || 2 v' )) 
】} 


extend(res，def) 
EeeUIGmREes 

} else if (typeof def === "String') 攻 
return autoCcssTransition(def) 


const autoCssTransition: (name: String) => 0bject = cached(name => { 
etuUmnE 人 
enterClass:  $ftname}+-enter ， 
enterToClass:  ` $fname}-enter-to ， 
enterActiveCclass:  $ftname}-enter-active ， 
JeaveClass:  $tname}-Jeave ， 


JeaveToClass:  ${tname}-Jleave-to ， 
JeaveActiveCclass:  $tname}-1Lleave-active 


j 
}) 


resolveTransition 会 通过 autocssTransition 处 理 name 属性 ， 生成 一 个 用 来 描 述 各 个 阶段 
的 class 名 称 的 对 象 ， 扩 展 到 def 中 并 返回 给 data ， 这 样 我 们 就 可 以 从 data 中 获取 到 过 渡 
相关 的 所 有 数据 。 


。 处 理 边 界 情况 


// activeInstance wil1 always be the <transition> component managing this 
// transition，oOne edge case to check is when the <transition> 1S plLaced 
// as the root node of a _ child component ，In that case we need to check 
// <transition>'s parent for appear check. 
Jet context = activeInstance 
let transitionNode = activeInstance,$vnode 
while (transitionNode && transitionNode.parent) { 

transitionNode = transitionNode,.parent 

Context = translitionNode,context 


】} 
const IsSAppear = !context.,_ isMounted || !vnode.iIisRootInsert 
革 (IsSAppear && !appear && appear !== ” ) 攻 
Ee 记 Un 
】} 


这 是 为 了 处 理 当 <transition> 作为 子 组 件 的 根 节 点 ， 那 么 我 们 需要 检查 它 的 父 组 件 作 为 appear 
的 检查 。 isAppear 表示 当前 上 下 文 实例 还 没有 mounted ， 第 一 次 出 现 的 时 机 。 如 果 是 第 一 次 并 且 
<transition> 组 件 没有 配置 appear 的 话 ， 直接 返回 。 


。 定义 过 渡 类 名 、 钩 子 本 数 和 其 它 配置 


马 


const startClass = 1ISAppear && appearClass 
? appearC1lass 
enterClass 
const activeCJlass = IsAppear && appearActiveClass 
? appearActiveCJlass 
: enterActiveClass 
const toClass = 1ISAppear && appearToC1lass 
? appearToCJlass 
: enterToClass 


const beforeEnterHook = IsSAppear 
? (beforeAppear || beforeEnter ) 
beforeEnter 
const enterHook = IsSAppear 
? (typeof appear === 'function' ? appear : enter) 


: enter 
const afterEnterHook = IsSAppear 
? (afterAppear || afterEnter) 
: afterEnter 
const enterCanceJlledHook = IsSAppear 
? (appearCancelled || enterCcance1lled ) 
: enterCancel1led 


const exp1licitEnterDuration: any = toNumber( 
Isobject(duration) 
? duration.enter 


: duration 
) 
If (process,.env,NODE_ENV !== "production'” && exp1lLicitEnterDuration != null1) { 
checkDuration(exp]icitEnterDuration， "enter'，vnode) 
】} 
const expectsCSS = css !== false && !iISIE9 


const UserwantsCcontrol = getHookArgumentSsLength(enterHook ) 


const cb = el._enterCcb = once(() => 

If (expectSCSS ) 二 
removeTransitionClass(el，toCclass) 
removeTransitionClass(el，activeCclass ) 

】} 

If (cb.cancelled) 攻 
If (expectsCSS) 攻 

removeTransitionCclass(el，SstartClass) 


】} 
enterCanceJlledHook && enterCancelledHook(el) 
else { 
afterEnterHook && afterEnterHook(el]) 
出 
elJ,_enterCcb = nu]1 
了 ) 


对 于 过 湾 类 名 方面 ， startclass 定义 进入 过 渡 的 开始 状态 ， 在 元 素 被 插入 时 生效 ， 在 下 一 个 帧 移 
除 ; activeclass 定义 过 渡 的 状态 ， 在 元 素 整个 过 湾 过 程 中 作用 ， 在 元 素 被 插入 时 生效 ， 在 
transition/animation 完成 之 后 移 除 ; toclass 定义 进入 过 渡 的 结束 状态 ， 在 元 素 被 插 人 一 帧 后 
生效 (年 此 同时 startclass 被 删除 )， 在 <transition>/animation 完成 之 后 移 除 。 


对 于 过 渡 钧 子 函 数 方面 ， beforeEnterHook 是 过 渡 开 始 前 执行 的 钩子 函数 ， enterHook 是 在 元 素 
插入 后 或 者 是 _v-show 显示 切换 后 执行 的 钧 子 函 数 。 afterEnterHook 是 在 过 渡 动 画 执 行 完 后 的 钧 
子 函 数 。 


explicitEnterDuration 表示 enter 动画 执行 的 时 间 。 


expectsCSSs 表示 过 滤 动 画 是 受 CSS 的 影响 。 


cb 定义 的 是 过 湾 完 成 执行 的 回调 西数 。 


e。 合并 insert 钩子 函数 


If (!vnode.data,show) { 
// remove pending leave element on enter by injecting an insert hook 
mergeVvNodeHook(vnode， "insert '，() => { 
const parent = el.parentNode 
const pendingNode = parent && parent._pending && parent ._pending[vnode,.key] 
If (pendingNode && 


pendingNode .tag === Vvnode.tag && 
pendingNode.elm._ leavecCb 

) 
pendingNode.elm._ leavecb() 

】} 

enterHook && enterHook(el，cb) 


}) 


mergeVNodeHook 的 定义 在 SrcVcore/vdom/helpers/merge-hook,.Jjs 中 : 


export function mergeVvNodeHook (def: Object，hookkey: String，hook: Function) 1 
If (def instanceof VNode) 
def = def.data.hook || (def.data.hook = {}) 
】} 
Jet Invoker 
const oldHook = def[hookKkey] 


function wrappedHook () 攻 
hook.apply(this，arguments ) 
// important: remove merged hook to ensure it's called only once 
// and prevent memory 1Leak 
remove(invoker.fns，WwrappedHook ) 


If (isuUundef(o1LdHook) ) 攻 
// no existing hook 
Invoker = createFnInvoker([wrappedHook] ) 
Telse 
SanouligmoresTT 7 
If (isDef(o1ldHook.fns) && IsTrue(oldHook ,merged)) { 
// already a merged Invoker 
Invoker = 01dHook 
invoker.fns.push(wrappedHook ) 
EeeSse 玫 
// existing plain hook 
invoker = createFnInvoker([oldHook，wrappedHook] ) 


Invoker .merged = true 
def[hookKkey] = Invoker 


mergeVNodeHook 的 逻辑 很 简单 ， 就 是 把 hook 画 数 合并 到 def.data.hook[hookey] 中 ， 生 成 新 
的 invoker ， createFnInvoker 方法 我 们 在 分 析 事件 章节 的 时 候 已 经 介绍 过 了 。 


我 们 之 前 知道 组 件 的 _vnode 原本 定义 了 init 、 prepatch 、 insert 、 destroy 四 个 钧 子 范 
数 ， 而 mergevNodeHook 画 数 就 是 把 一 些 新 的 钧 子 函 数 合并 进来 ， 例 如 在 <transition> 过 程 中 合 
并 的 insert 钧 子 函 数 ， 就 会 合并 到 组 件 vnode 的 insert 钩子 函数 中 ， 这 样 当 组 件 插入 后 ， 就 
会 执行 我 们 定义 的 enterHhook 了 。 


。 开始 执行 过 渡 动 画 


必 重 SaiEEenceraeranstaon 

beforeEnterHook && beforeEnterHook(el) 

1I (expectsCSS) 1{ 
addTransitionCclass(el，SstartClass ) 
addTransitionClass(el，activeCclass ) 
nextFrame(() => 革 

removeTransitionClass(el，SstartClass) 
If (!cb.cancelled) 区 
addTransitionCclass(el1，toClass ) 
If (!userwWantSsControl) 
If (isvValidDuration(expJicitEnterDuration)) { 
SetTimeout(cb，exp]licitEnterDuration) 
Telse { 
whenTransitionEnds(eLl，type，cb) 


】) 


首先 执行 beforeEnterHook 钧 子 函 数 ， 把 当前 元 素 的 DOM 节点 el 传人 ， 然 后 判断 
expectsCcss ， 如 果 为 true 则 表明 希望 用 CSS 来 控制 动画 ， 那 么 会 执行 addTransitionClass(el， 
StartClass) 和 addTransitionClass(el，activeCclass) ， 它 的 定义 在 


src/platforms/runtime/transition-util.js 中 : 


exportitunctronEaddnranstaonclass(el anyniclsstrangj) 诺 人 
const transitionCclasses = el._transitionClasses || (el._transitionClasses = []) 
If (transitIionClasses, indexof(cls) < 0) 1{ 
transitionClasses,.push(cls) 
addCJlass(el，cjls) 


其 实 非 常 简单 ， 就 是 给 当前 DOM 元 素 el 诡 加 样式 cls ， 所 以 这 里 添加 了 startclass 和 
activeclass ， 在 我 们 的 例子 中 就 是 给 p 标签 添加 了 fade-enter 和 fade-enter-active 2 个 
样式 。 


接 下 来 执行 了 nextFrame 


const raf = InBrowser 
? window.requestAnimationFrame 
? window.requestAnimationFrame.bind(window) 
: SetTimeout 
: fn => fn() 


export functaionunextFErametfn FEunctIom) 1 
raf(() => 苹 
raf(fn) 
】) 


它 就 是 一 个 简单 的 _ requestAnimationFrame 的 实现 ， 它 的 参数 如 会 在 下 一 帧 执行 ， 因 此 下 一 帧 执行 


了 removeTransitionCclass(el，startClass) 


export functaon removeTransitionclass (el any cls' strazng) 1 
If (el,_transitionClasses) 
remove(el,_transitionClasses，Ccls) 


removeC1lass(el，cCcls) 


把 startclass 移 除 ， 在 我 们 的 等 例子 中 就 是 移 除 fade-enter 样式 。 然 后 判断 此 时 过 小 没有 被 取 
消 ， 则 执行 addTransitionclass(el，toclass) 添加 toclass ， 在 我 们 的 例子 中 就 是 添加 了 
fade-enter-to 。 然 后 判断 !userwantscontrol ， 也 就 是 用 户 不 通过 enterHook 钩子 函数 控制 
动画 ， 这 时 候 如 果 用 户 指定 了 explicitEnterDuration ， 则 延 时 这 个 时 间 执 行 cb ， 否 则 通过 
whenTransitionEnds(eL，type，cb) 决定 执行 cb 的 时 机 : 


export function whenTransitionEnds (人 
el1: ElLement， 
expectedType: ?string， 
CeEUneCEIon 
JE 
const { type，timeout，propCcount } = getTransitionInfo(e1L，expectedType) 
if (!type) return cb() 
const event: String = type === <transition> ?3 transitionEndEvent : animationEndEV 
ent 
Jet ended 0 
const end = () => { 


el,removeEVventListener(event，onEnd ) 
cb( ) 


const onEnd = e => 并 


If (etarget === el) { 
If (++ended >= propCount ) 荆 
end ( ) 
} 
】} 


SetTimeout(() => { 
If (ended < propCount ) 革 
end ( ) 
引 
JanmegutcEH 
el.addEVentListener(event，onEnd ) 


羡 


whenTransitionEnds 的 逻辑 具体 不 深 讲 了 ， 本 质 上 就 利用 了 过 渡 动 画 的 结束 事件 来 决定 cb 画 数 
的 执行 。 


最 后 再 回 到 cb 画 数 : 


const cb = el._enterCcb = once(() => { 

If (expectSCSS) 二 
removeTransitionClass(el，toCclass) 
removeTransitionClass(el，activeCclass ) 

】} 

If (cb.cancelled) 攻 
If (expectSsCSS) 攻 

removeTransitionCcJlass(el，SstartClass ) 


】} 
enterCanceJlledHook && enterCancelledHook(el) 
Telse 
afterEnterHook && afterEnterHook(el]) 
】} 
el,_enterCcb = nu]1 
了 ) 


其 实 很 简单 ， 执行 了 removeTransitionclass(el，toCclass) 和 removeTransitionCclass(eJ]， 
activeClass) 把 toclass 和 activeclass 移 除 ， 然后 判断 如 果 有 没有 取消 ， 如 果 取 消 则 移 除 
startCclass 并 执行 entercancelledHook ， 否 则 执行 afterEnterHook(el) 。 


那么 到 这 里 ， entering 的 过 程 就 介绍 完了 。 


leaving 


司 entering 相对 的 就 是 leaving 阶段 了 ， entering 主要 发 生 在 组 件 插 人 后， 而 leaving 主 
要 发 生 在 组 件 销毁 前 。 


export function leave (vnode: VNodewWithData，rm: Function) { 


const el: any = vnode .elm 


// call enter callback now 

If (IsDef(el1._enterCcb)) 
el1.,_enterCcb ,cancelled = true 
el,_entercCb() 


const data = resolveTransition(vnode.data.transition) 
If (IsUndef(data) || el.nodeType !== 工 ) 攻 
return rm() 


/* Istanbul ignore 芽 */ 
If (IsDef(el._ leavecb)) 
return 


ConstE 
CSS/ 
type， 
eaveC1lass， 
eaveToC1lass 
eaveAct1iveC1lass， 
beforeLeave， 
eave， 
afterLeave， 
JeaveCcancel1led， 
delayLeave'， 
duration 

} = data 


const expectsCSS = css !== false && !1ISIE9 
const userwantsControl = getHookArgumentsLength(1Leave) 


const explicitLeaveDuration: any = toNumber( 


Isobject(duration) 
? duration. eave 
duration 
) 
If (process,.env.NODE_ENV !== "production'&& isDef(expJicitLeaveDuration)) { 


checkDuration(explicitLeaveDuration， "leave'，vnode) 


const cb = el,_ leavecb = once(() => { 
If (el.parentNode && el.parentNode,_pending) 革 
elL.parentNode._pending[vnode.key] = _ null 
】} 
If (expectsCSS) 攻 
removeTransitionCclass(el，]JleaveToClass ) 


removeTransitionCclass(el，]JleaveActiveClass) 
】} 
If (cb.cancelled) { 
If (expectsCSS) 革 
removeTransitionCclass(el，1leaveClass) 
小 
Jeavecance]lled && leavecCancel1led(el) 
} else 
rm( ) 
afterLeave && afterLeave(el) 
】} 
el,_ Jeavecb = nul1 


}) 


If (delayLeave) 革 
delayLeave(performLeave ) 
Telse 人 
performLeave( ) 


function performLeave () 六 
// the delayed leave may have already been cancelled 
If (cb.cancelled) { 

return 


】} 


recordLeavVvingEelement 


If (!vnode.data.show) 荆 
(el.parentNode._pending || (el.parentNode,_pending = {f))[(vnode.key: any)] = 
Vvnode 
】} 
beforeLeave && beforeLeave(el) 
If (expectSsCSS) 革 
addTransitionCclass(el，]JleaveCclass ) 
addTransitionCclass(el，]JleaveActiveClass ) 
nextFrame(() => 革 
removeTransitionCclass(el，1leaveClass) 
If (!cb.cancelled) 攻 
addTransitionCJlass(el，]leaveToClass ) 
If (!userwWantSsControl) 革 
If (isValidDuration(exp1LicitLeaveDuration)) 1 
SetTimeout(cb，exp]licitLeaveDuration) 
) else ({ 
whenTransitionEnds(elLl，type，cb) 


】} 
了]) 


Jeave && leave(el1，cb ) 
If (!expectsCSS && !userwWantsControl) 
cb( ) 


纵 观 leave 的 实现 ， 和 enter 的 实现 几乎 是 一 个 镜像 过 程 ， 不 同 的 是 从 data 中 解析 出 来 的 是 
leave 相关 的 样式 类 名 和 和 钧 子 范 数 。 还 有 一 点 不 同 是 可 以 配置 delayLeave ， 它 是 一 个 函数 ， 可 以 
延 时 执行 leave 的 相关 过 滤 动 画 ， 在 leave 动画 执行 完 后 ， 它 会 执行 rm 本 数 把 节点 从 DOM 中 
真正 做 移 除 。 


这 疆 


CA 了 时 


人 


那么 到 此 为 止 基本 的 <transition> 过 渡 的 实现 分 析 完 毕 了 ， 总 结 起 来 ，Vue 的 过 渡 实 现 分 为 以 下 几 
个 步骤 : 


1. 自动 嗅 探 目 标 元 素 是 否 应 用 了 CSS 过 渡 或 动画 ， 如 果 是 ， 在 恰当 的 时 机 添加 /删除 CSS 类 名 。 
2. 如 果 过 湾 组 件 提供 了 JavaScript 钧 子 范 数 ， 这 些 钩 子 函 数 将 在 恰当 的 时 机 被 调用 。 


3. 如 果 没 有 找到 JavaScript 钧 子 并 且 也 没有 检测 到 CSS 过 渡 / 动 画 ，DOM 操作 ( 插 人 /删除 ) 在 下 一 帧 
中 立即 执行 。 


所 以 真正 执行 动画 的 是 我 们 写 的 CSS 或 者 是 JavaScript 钧 子 范 数 ， 而 Vue 的 <transition> 只 是 帮 有 我 
们 很 好 地 管理 了 这 些 CSSs 的 添加 /删除 ， 以 及 钩子 函数 的 执行 时 机 。 


transition-group 


前 一 区 我 们 介绍 了 <transiiton> 组 件 的 实现 原理 ， 钨 只 能 针对 单一 元 素 实 现 过 渡 效 果 。 我 们 做 前 端 
开发 经 常会 遇 到 列表 的 需求 ， 我 们 对 列表 元 素 进 行 添 加 和 删除 ， 有 时 候 也 希望 有 过 渡 效 果 ，Vue.js 提供 
了 <transition-group> 组 件 ， 很 好 地 帮助 我 们 实现 了 列表 的 过 渡 效 果 。 那 么 接 下 来 我 们 就 来 分 析 一 
下 饭 的 实现 原理 。 


为 了 更 直观 ， 我 们 也 是 通过 一 个 示例 来 说 明 : 


let vm = new Vue({ 
el:  "'#app '， 
tempJlate: '<div id="1ist-compJlete-demo” class="demo"> ”+ 
"<button VvV-on:click="add">Add</button> ”+ 
"<button VvV-on:click="remove">Remove</button> ， + 
"<transition-group name="11ist-complete"”tag="p"> ”+ 
"<Span V-for="item in Items"”Vv-bind:key="Item” class="]List-Ccomp1lete-Item"> ”+ 
REEEm ET 
ESDaI 
<Xamsatnomsgroup>a 
TV 二 
data: 荆 
Eee SS 
nextNum: 10 
}， 
methods: 攻 
randomIndex: function () 并 
return Math ,floor(Math.random() * this,Items,Jength) 
】 
add: function () 并 
this,items.Splice(this,.randomIndex()，90，this,.nextNum++) 
】 
remove: function () 攻 
this,items.Splice(this.randomIndex()， 工 ) 


}) 


.LSst-complete-item 
display: inline-b]lock:; 
margin-right: 10px'， 
】} 
.Ist-Complete-move 攻 
transition: al1 1Ss， 
】} 
.1ist-Ccomplete-enter， .Ist-compJlete-leave-to { 
0paciky 9， 
transform: translateY(30px); 


由 


.Ist-Ccomplete-enter-active 
transition: al1L 1Ss， 


.Ist-Ccomplete-Jleave-active 
transition: al1L 1Ss， 
position: absolute'; 


这 个 示例 初始 会 展现 1-9 十 个 数字 ， 当 我 们 点 击 Add 按钮 时 ， 会 生成 nextNum 并 随机 在 当前 数列 
表 中 插 人 ; 当 我 们 点 击 ”Remove 按钮 时 ， 会 随机 删除 挤 一 个 数 。 我 们 会 发 现在 数 添加 删除 的 过 程 中 在 
列表 中 会 有 过 滤 动 画 ， 这 就 是 <transition-group> 组 件 配合 我 们 定义 的 CSS 产生 的 效果 。 


我 们 首先 还 是 来 分 析 <transtion-group> 组 件 的 实现 ， 它 的 定义 在 


Src/Vplatforms/webVruntime/components/transitions.js 中 : 


const props = extend ({ 
tag: String， 
moveClass: String 

}+，transitionProps ) 


delete props.mode 


export default 1{ 


Props， 


beforeMount () 攻 
const Update = this,_update 
this._ update = (vnode，hydrating) => 攻 
// force removing pass 
this,. patch_  ( 
thizs,_vnode， 
this.kept， 
false anydcatkang 
true // removeonly (!important，avoids unnecessary moves ) 
) 
this, Vvnode = this.kept 
update.call(this，vnode，hydrating ) 
} 
】， 


render (h:; Function) { 
const tag: string = this,tag || this.$vnode.dqata.tag || "span 
const map: Object = 0bject.create(nul1) 
const prevCchildren: Array<VNode> = this.prevChildren = this.children 
const rawCchildren: Array<VNode> = this.$slots.default || D 口 
const children: Array<VNode> = this.children = [] 
const transitionData: 0bject = extractTransitionData(this ) 


for (Jet IL = 0; 工 < rawCchildren.Length; I++) 攻 


const c: VNode = rawChildren[I] 
If (c.tag) 革 
if (c.key != null && String(c,key),indexof(' Vv1list') !== 0) 革 
children.push(c) 
map[c,key] = c 


(cdata || (cdata = {1)).transition = tranSsitionData 
} else if (process.env,NODE_ENV !== "production') 革 
const opts: ?VNodecomponentoptions = c.componentOptions 
const name: String = opts ? (opts.Ctor.options .name || opts,tag || ”) 
ctag 
warn( <transition-group> children must be keyed: <$ftname}> ) 
} 
} 
} 


}， 


If (prevChildren) 攻 
const kept: Array<VNode> = [] 
const removed: Array<VNode> = [] 
for (let IL = 0;) 工 < prevCchildren,Jlength; I++) 并 
const c: VNode = prevCchildren[I] 
c.data.transition = transitionData 
c.data.pos = c.elm,.getBoundingCclientRect() 
If (map[c.key]) 1{ 
kept,push(c) 
else ({ 
removed .push(c) 


】 
this.kept = h(tag，nul1，kept) 
thizs.removed = removed 


return h(tag，nul1，children) 


updated () 革 


const children: Array<VNode> = this.prevChildren 


const moveClass: string = this.moveClass || ((this.name || "v' )+ -move') 

If (!children.length || !this,hasMove(children[9].elm，moveCclass)) 攻 
return 

】} 


// we divide the work into three Loops to avoid mixing DOM reads and writes 
// in each Iteration - which helps prevent layout thrashing . 
children.forEach(callPendingCcbs ) 

children.forEach(recordPosition) 

children.forEach(applyTranslation) 


// force ref1low to put everythjing in position 
// asSsign to this to avoid being removed in tree-Shaking 
// $flow-disable-]ine 


this._reflow = document.body.offsetHeight 


children.forEach((c: VNode) => f 
If (c.dqata.moved) 蔷 

var el: any = c.elm 

var S: any = el,.style 

addTransitionCclass(el1，moveCclass) 

Ss.transform = Ss.WebkitTransform = Ss.transitionDuration = 

el.addEventListener(transitionEndEVvVent，el._movecb = function cb (e) 

if (!e || /transform$/v.test(e.propertyName ) ) 革 

el.removeEventListener(transitionEndEVvVent， cb ) 
el._movecb = nuJ1l 
removeTransitionCclass(el，moveCclass) 


了]) 


了]) 
}， 


methods: 攻 
hasMove (el: any，moveCclass: String): boolean { 
/* Istanbul Iignore 工 “/ 
If (!hasTransition) 荆 
eurnng false 
astanmbulesagrmoine 全 7 
If (thzs,_hasMove) 革 
return this,_hasMove 


// Detect whether an element with the move class applied has 
// CSS transitions，Since the element may be inside an entering 
// transition at this very moment，we make a clone of it and remove 
// all other transition classes applied to _ ensure only the move class 
// IIS app1Lied ， 
const clone: HTMLEJement = el.cloneNode() 
If (el._transitionClasses) 荆 
el._transitionClasses.forEach((cls: String) => { removeClass(clone，cls) }) 
} 
addCJlass(clone，moveCclass ) 
clone,style,display = "none' 
thIis.$el.appendchild(clone) 
const info: Object = getTransitionInfo(clone) 
thIs.$el,.removechild(clone) 
return (this._hasMove = info.hasTransform) 


render 国 数 


<transition-group> 组 件 也 是 由 render 画 数 浑 染 生 成 vnode ; 接 下 来 我 们 先 分 析 render 的 
实现 。 


。 定 义 一 些 变量 


const tag: String = this,tag || this.$vnode.data.tag || Span. 


const map: 0bject 0bject,.create(nul1) 

const prevChildren: Array<VNode> = this.prevChildren = this.children 
const rawCchildren: Array<VNode> = this.$slots.default || [ 襄 

const children: Array<VNode> = this.children = [] 

const transitionData: 0bject = extractTransitionData(this ) 


不 同 于 <transition> 组 件 ， <transition-group> 组 件 非 抽象 组 件 ， 它 会 泻 染 成 一 个 真实 元 素 ， 
默认 tag 是 span 。 prevchildren 用 来 存储 上 一 次 的 子 节点 ; children 用 来 存储 当前 的 子 节 
点 ; rawchildren 表示 <transtition-group> 包 庄 的 原始 子 节点 ; transtionData 是 从 
<transtition-group> 组 件 上 提取 出 来 的 一 些 演 染 数 据 ， 这 点 和 <transition> 组 件 的 实现 是 一 样 
的 。 


e。 通 历 rawchidren ， 初 始 化 children 


for (let LIL = 0;) 工 < rawCchildren.Llength; I++) 荆 
const c: VNode = rawChildren[I] 
if (c.tag) 于 
if (c.key != null && String(c,key),indexof(' Vv1list') !== 0) 六 
children.push(c) 
map[c,.key] = c 


'(c.data || (cdata = {f)).transition = transitionData 
} else if (process,env,NODE_ENV !== "production') 攻 
const opts: ?VNodeCcomponentoptions = c,componentoOptions 
const name: String = opts ? (opts.Ctor.options.name || opts,tag || ”) : cta 
9 
warn( <transition-group> children must be keyed: <$tname}> ) 
】} 
】} 
】} 


其 实 就 是 对 rawchildren 通 历 ， 拿 到 每 个 vnode ， 人 然后 会 判断 每 个 vnode 是 否 设置 了 key ， 
这 个 是 <transition-group> 对 列表 元 素 的 要 求 。 然 后 把 vnode 添加 到 children 中 ， 然 后 把 刚 
刚 提取 的 过 渡 数 据 transitionData 添加 的 vnode,data.transition 中 ， 这 点 很 关键 ， 只 有 这 样 


才能 实现 列表 中 单个 元 素 的 过 湾 动 画 。 


e。 处 理 prevChildren 


If (prevCchildren) 革 
const kept: Array<VNode> = [] 
const removed: Array<VNode> = [] 
for (let IL = 0;) 工 < prevCchildren.Jlength; I++) { 
const c: VNode = prevChildren[i] 


c.data.transition = tranSsitionData 
c.data.pos = c.elm.getBoundingCclientRect( ) 
If (map[c.key]) 攻 

kept,.push(c) 
else Tt 

removed.push(c ) 
】} 


】 
this,kept = h(tag，nul1，kept) 
this.removed = removed 


return h(tag，nul1，children) 


当 有 prevchildren 的 时 候 ， 我 们 会 对 它 做 喜 历 ， 获 取 到 每 个 _vnode ， 然 后 把 transitionData 
赋值 到 vnode.data.transition ) 这 个 是 为 了 当 它 在 enter 和 leave 的 钧 子 函 数 中 有 过 波动 
画 ， 我 们 在 上 节 介 绍 transition 的 实现 中 说 过 。 接 着 又 调用 了 原生 DOM 的 
getBoundingclientRect 方法 获取 到 原生 DOM 的 位 置信 息 ， 记 录 到 vnode.data.pos 中 ， 然 后 判 
断 一 下 _vnode.key 是 否 在 _ map 中， 如 果 在 则 放 入 kept 中 ， 和 否则 表示 该 节点 已 被 删除 ， 放 和 
removed 中 ， 然 后 通过 执行 h(tag，nul1，kept) 演 染 后 放 入 this.kept 中 ， 把 removed 用 
this .removed 保存 。 最 后 整个 render 画 数 通过 h(tag，nul1，children) 生成 泻 染 vnode 。 


如 果 transition-group 只 实现 了 这 个 render 本 数 ， 那 么 每 次 插入 和 删除 的 元 素 的 缓 动 动画 是 可 
以 实现 的 ， 在 我 们 的 例子 中 ， 当 新 增 一 个 元 素 ， 它 的 插 人 的 过 渡 动 画 是 有 的 ， 但 是 剩余 元 素平 移 的 过 
滤 效 果 是 出 不 来 的 ， 所 以 接 下 来 我 们 来 分 析 <transition-group> 组 件 是 如 何 实现 剩余 元 素平 移 的 过 
渡 效 果 的 。 


move 过 小 实现 


其 实 我 们 在 实现 元 素 的 插入 和 删除 ， 无 非 就 是 操作 数据 ， 控 制 它们 的 添加 和 删除 。 比 如 我 们 新 增 数 据 
的 时 候 ， 会 添加 一 条 数据 ， 除 了 重新 执行 render 画 数 泻 染 新 的 节点 外 ， 还 要 触发 updated 钩子 画 
数 ， 接 着 我 们 就 来 分 析 updated 钩子 函数 的 实现 。 


。 判断 子 元 素 是 否定 义 move 相关 样式 


const children: Array<VNode> = this.prevChildren 


const moveClass: string = this,moveClass || ((this.name || "vv )+ -move') 

If (!children,.Jlength || !this.hasMove(children[90].elm，moveCclass)) { 
Eee 萎 加 四 人 

】} 


hasMove (el: any，moveCclass: String): boolean 1{ 
ZLSEafioui TIOTGSTE 沁 
If (!hasTransition) 攻 
etcurmnilihalse 
】} 
nsEaribuegnoresat 
If (this,_hasMove) 


return this._ hasMove 


// Detect whether an element with the move class applied has 
// CSS transitions，Since the element may be inside an entering 
// transition at this very moment，we make a clone of it and remove 
// all other transition classes applied to ensure only the move class 
// Is applied ， 
const clone: HTMLEJement = el.cloneNode() 
If (elL._transitionClasses) 于 
el,_transitionClasses.forEach((cls: String) => { removeClass(clone，cls) }) 
} 
addCJlass(clone，moveCclass ) 
clone.style.display = "none' 
this.$el.appendChild(clone) 
const info: Object = getTransitionInfo(clone) 
this.$el.removeCchild(clone) 
return (thizs,_hasMove = info.hasTransform) 


核心 就 是 _hasMove 的 判断 ， 首 先 克 隆 一 个 DOM 节点 ， 然 后 为 了 避免 影响 ， 移 除 它 的 所 有 其 他 的 过 
渡 class ; 接着 添加 了 moveclass 样式 ， 设 置 display 为 none ， 添 加 到 组 件 根 节点 上 ; 接 下 
来 通过 getTransitionInfo 获取 它 的 一 些 缓 动 相 关 的 信息 ， 这 个 函数 在 上 一 节 我 们 也 介绍 过 ， 然 后 
从 组 件 根 节 点 上 删除 这 个 克隆 节点 ， 并 通过 判断 info.hasTransform 来 判断 hasMove ， 在 我 们 的 
例子 中 ， 该 值 为 true 。 


。 子 节点 预 处 理 


children.forEach(callPendingCcbs ) 
children.forEach(recordPosition) 
children.forEach(applyTranslation) 


对 children 做 了 3 轮 循环 ， 分 别 做 了 如 下 一 些 处 理 : 


function callPendingCcbs (c: VNode) 1{ 
If (c.elm,_movecb) 
c.elm,_ movecb() 
} 
If (c.elm.,_enterCcb) 区 
c.elm._entercb() 


fuUnmctionirecorcdPosItroncoeVNOoweyt 
c.data.newPos = c.elm.getBoundingCclientRect() 


function applyTranslation (c: VNode) 六 
const oldPos = c.data.pos 
const newPos = c.data.newPos 


const dx = 01dPos,Jleft - newPos ,Left 
const dy = 01dPos.top - newPos.top 
if (dx || dy) 荆 


c.data.moved = true 

conSst Ss = Cc,elm.style 

Ss.transform = Ss.WebkitTransform = translate(${Ldxypx,$${tdyypx) 
Ss.transitionDuration = "0S， 


callPendingcbs 方法 是 在 前 一 个 过 渡 动 画 没 执 行 完 又 再 次 执行 到 该 方法 的 时 候 ， 会 提前 执行 
_movecb 和 _entercb 。 


recordPosition 的 作用 是 记录 节点 的 新 位 置 。 


app1LyTranslation 的 作用 是 先 计 算 节 点 新 位 置 和 旧 位 置 的 差 值 ， 如 果 差 值 不 为 0， 则 说 明 这 些 节点 


| 三 虹 古 豆 
是 需 


移动 的 ， 所 以 记录 vnode.data.moved 为 true， 并 且 通 过 设置 transform 把 需要 移动 的 节点 


的 位 置 又 偏 移 到 之 前 的 旧 位 置 ， 目 的 是 为 了 做 move 缓 动 做 准备 。 


。 通 历 子 元 素 实 现 move 过 滤 


this,_reflow = document.body.offsetHeight 


children.forEach((c: VNode) => { 
If (c.data.moved) 攻 


}) 


var el: any = c.elm 
var S: any = el.style 
addTransitionCclass(e1，moveCclass ) 
Ss.transform = S.WebkitTransform = S.translitionDuration = 
el.addEventListener(transitionEndEVent，el.,_movecb = function cb (e) 
if (!e || Vtransform$/.test(e,.propertyName ) ) 
el.removeEventListener(transitionEndEVvVent， cpb ) 
el.,_movecb = nul1 
removeTransitionCclass(elLl，moveCclass ) 
了]) 


首先 通过 document .body.offsetHeight 强制 触发 浏览 器 重 绘 ， 接 着 再 次 对 children 通 历 ， 先 给 
子 节 点 添加 moveclass ， 在 我 们 的 例子 中 ， moveclass 定义 了 transition: all 1s; 缓 动 ; 接 


着 把 子 


节点 的 style.transform 设置 为 空 ， 由 于 我 们 前 面 把 这 些 节点 偏 移 到 之 前 的 旧 位 置 ， 所 以 它 


就 会 从 日 位 置 按照 1s 的 缓 动 时 间 过 渡 偏 移 到 它 的 当前 目标 位 置 ， 这 样 就 实现 了 move 的 过 渡 动 画 。 
并 且 接 下 来 会 监听 transitionEndEvent 过 渡 结 束 的 事件 ， 做 一 些 清 理 的 操作 。 


另外 ， 


由 于 虚拟 DOM 的 子 元素 更 新 算法 是 不 稳定 的 ， 它 不 能 保证 被 移 除 元 素 的 相对 位 置 ， 所 以 我 们 强 


制 <transition-group> 组 件 更 新 子 节 点 通过 2 个 步 又 : 第 一 步 我 们 移 除 需要 移 除 的 vnode ， 同 时 
触发 它们 的 leaving 过 渡 ; 第 二 步 我 们 需要 把 插 人 和 移动 的 节点 达到 和 饭 们 的 最 终 态 ， 同 时 还 要 保证 
移 除 的 节点 保留 在 应 该 的 位 置 ， 而 这 个 是 通过 beforeMount 钩子 酚 数 来 实现 的 : 


beforeMount () 苹 
const update = this._update 
this,_ update = (vnode，hydrating) => 攻 
// force removing pass 
this, patch_ ( 
this._vnode， 
this.kept， 
false，// hydrating 
true /V/ removeonly (!important，avoids unnecessary moves ) 
) 
this, vnode = this.kept 
update.call(this，vnode，hydrating) 


通过 把 patch_ ”方法 的 第 四 个 参数 removeonly 设置 为 true， 这 样 在 updatechildren 阶段 ， 
是 不 会 移动 vnode 节点 的 。 


总 结 

那么 到 此 ， <transtion-group> 组 件 的 实现 原理 就 介绍 完毕 了 ， 它 和 <transition> 组 件 相 比 ， 实 
现 了 列表 的 过 渡 ， 以 及 它 会 浑 染 成 真实 的 元 素 。 当 我 们 去 修改 列表 的 数据 的 时 候 ， 如 果 是 添加 或 者 删 
除数 据 ， 则 会 触发 相应 元 素 本 身 的 过 渡 动 画 ， 这 点 和 <transition> 组 件 实现 效果 一 样 ， 除 此 之 外 
<transtion-group> 还 实现 了 move 的 过 滤 效 果 ， 让 我 们 的 列表 过 渡 动 画 更 加 丰富 。 
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路 由 的 概念 相信 大 部 分 同学 并 不 陌生 ， 它 的 作用 就 是 根据 不 同 的 路 径 映 射 到 不 同 的 视图 。 我 们 在 用 
Vue 开发 过 实际 项 目的 时 候 都 会 用 到 Vue-Router 这 个 官方 插件 来 帮 我 们 解决 路 由 的 问题 。Vue-Router 
的 能 力 十 分 强大 ， 它 文 持 hash 、 history 、 abstract 3 种 路 由 方式 ， 提 供 了 <router-1Link> 
和 <router-view> 2 种 组 件 ， 还 提供 了 简单 的 路 由 配置 和 一 系列 好 用 的 API。 


大 部 分 同学 已 经 掌握 了 路 由 的 基本 使 用 ， 但 使 用 的 过 程 中 也 难免 会 遇 到 一 些 蔽 ， 那 么 这 一 章 我 们 就 来 
深 控 Vue-Router 的 实现 细节 ， 一 旦 我 们 掌握 了 它 的 实现 原理 ， 那 么 就 能 在 开发 中 会 路 由 的 使 用 更 加 游 
为 有 余 。 


同样 我 们 也 会 通过 一 些 具体 的 示例 来 配合 讲解 ， 先 来 看 一 个 最 基本 使 用 例子 : 


<div Id="app"> 
<h1>HeJJlo App!</h1> 


<p> 
<!-- 使 用 router-1lLink 组 件 来 导航 ，- -> 
<!-- 通过 传 入 `to ”属性 指定 链接 ，- -> 
<!-- <router-1Link> 默认 会 被 泻 染 成 一 个 “<a> ”标签 --> 


<router-1Link to="/foo">Go to Foo</router -1ink> 
<router-1Link to="/bar">Go to Bar</router -1ink> 
</Vp> 
<!1-- 路 由 出 口 --> 
<!-- 路 由 匹配 到 的 组 件 将 泻 染 在 这 里 --> 
<router-VvView></router-View> 
</div> 


Import Vue from 'Vue' 
Import VueRouter from 'vue-router ， 


Vue.use(VueRouter ) 


// 1,， 定义 路由) 组件。 

// 可 以 从 其 他 文件 import 进来 

const Foo ={ template: "<div>foo</div>” } 
const Bar ={ tempJlate: "<div>bar</div>” } 


// 2.， 定义 路 由 
// 每 个 路 由 应 该 映射 一 个 组 件 。 其 中 "component'" 可 以 是 
// 通过 Vue.extend() 创建 的 组 件 构造 器 ， 

// 或 者 ， 只 是 一 个 组 件 配置 对 象 。 

// 我 们 晚点 再 讨论 舱 套 路 由 。 

const routes = [ 


{ path: ' /foo'"，component : Foo }， 
{ path: /bar'，component : Bar 
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// 3,， 创建 router 实例 ， 然 后 传 “routes ”配置 
// 你 还 可 以 传 别 的 配置 参数 ， 不 过 先 这 么 简单 着 吧 。 
const router = new VueRouter({ 

routes // (缩写 ) 相当 于 routes:; routes 
财 


// 4. 创建 和 挂 载 根 实例 。 
// 记得 要 通过 router 配置 参数 注入 路 由 ， 
// 从 而 让 整个 应 用 都 有 路 由 功能 
const app = new Vue({ 
router 
了 ).$mount( '#app ) 


这 是 一 个 非常 简单 的 例子 ， 接 下 来 我 们 先 从 _vue.use(VueRouter ) 


说 起 。 


CD 


CD 
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Vue 从 它 的 设计 上 就 是 一 个 渐进 式 JavaScript 框架 ， 它 本 身 的 核心 是 解决 视图 演 染 的 问题 ， 其 它 的 能 
就 通过 插件 的 方式 来 解决 。Vue-Router 就 是 官方 维护 的 路 由 插件 ， 在 介绍 饭 的 注册 实现 之 前 ， 我 们 移 
来 分 析 一 下 Vue 通用 的 插件 注册 原理 。 


Vue .use 


Vue 提供 了 vue.use 的 全 局 API 来 注册 这 些 插 件 ， 志 以 我 们 先 来 分 析 一 下 它 的 实现 原理 ， 定 义 在 


Vue/src/vcore/global-api/use.js 中 : 


export functaon inituUse (Vue” GlobalAPI) 革 
Vue.use = function (plLugin: Function | Object) 攻 
const installedPlugins = (this._ installedPlugins || (this._ installedPlugins = [ 


]) ) 
if (installedPlugins.indexof(pJlugin) > - 工 ) 苹 
etunnmtnas 


const args = toArray(arguments，1 工 ) 

args,unshift(this ) 

if (typeof plugin,instal1l === 'function' ) 六 
plugin.instal1.apply(plugin，args) 

} else if (typeof plugin === "function') 
plugin.apply(nul1，args) 

】} 

InstalJledPlugins,.push(plLugin) 

Eee 二 UnmnEtnas 


vue .use 接受 一 个 plugin 参数 ， 并 且 维 护 了 一 个 _installedPlugins 数组 ， 它 存储 所 有 注册 过 
的 plugin ; 接着 又 会 判断 plugin 有 没有 定义 install 方法 ， 如 果 有 的 话 则 调用 该 方法 ， 并 且 
该 方法 执行 的 第 一 个 参数 是 vue ; 最 后 把 plLugin 存储 到 InstalledPJugins 中 。 


可 以 看 到 Vue 提供 的 插件 注册 机 制 很 简单 ， 每 个 插件 都 需要 实现 一 个 静态 的 install 方法 ， 当 我 们 
执行 vue.use 注册 插件 的 时 候 ， 就 会 执行 这 个 install 方法 ， 并 且 在 这 个 instal1 方法 的 第 一 
个 参数 我 们 可 以 拿 到 vue 对 象 ， 这 样 的 好 处 就 是 作为 插件 的 编写 方 不 需要 再 额外 去 import Vue 
本 
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Vue-Ronuter 的 人 口 文件 是 src/index.js ， 其 中 定义 了 VvueRouter 类 ， 也 实现 了 _ install 的 静态 
方法 : VvueRouter .install = install ， 它 的 定义 在 src/instal1l.js 中 。 


export let _Vue 

export function instal1l (Vue) { 
if (instal1.installed && _Vue === Vue) return 
Instal]1.installed = true 


_Vue = Vue 
const IsDef =V=>YVv IlI== undefined 


const registerInstance = (Vm，CcallVval) => f 
let 工 = vm.$options,_parentVnode 
If (isDef(I) && isDef(I = 1I.data) && IlisDef(I = 1I.registerRouteInstance)) 并 
I(vm， cal1lVal) 


Vue .mixin({ 
beforecCreate () 
If (isDef(thlis.$options.router)) 
thlis,_routerRoot = this 
thlis,_router = this.$options.router 
this,_router ,init(this) 
Vue.util.defineReactive(this， "route'，this,_router ,history.current) 


Juelse 1{ 
this,_routerRoot = (thlis.$parent && this.$parent.,_routerRoot ) || this 
registerInstance(this，this) 
}， 


destroyed () 荆 
registerInstance(thils ) 
】} 
了 ) 


Object ,defineProperty(Vue.prototype， '$router '， 攻 
get () { return this,_routerRoot.,_router } 


]) 


Object ,defineProperty(Vue.prototype， '$route ' ， 攻 
get () { return this,_routerRoot._route } 


}) 


Vue.component( "RouterView' ，View) 
Vue.component( "RouterLink'，Link) 


const strats = Vue.config.optionMergeStrategies 
Strats.beforeRouteEnter = strats.beforeRouteLeave = Strats.beforeRouteUpdate = st 
rats,.created 


由 


当 用 户 执 行 vue,.use(vueRouter) 的 时 候 ， 实 际 上 歼 是 在 执行 install 本 数 ， 为 了 确保 instal1l 
逻辑 只 执行 一 次 ， 用 了 install.installed 变量 做 已 安装 的 标志 位 。 另 外 用 一 个 全 局 的 _vue 来 
接收 参数 vue ， 因 为 作为 Vvue 的 插件 对 Vvue 对 象 是 有 依赖 鸣 ， 但 又 不 能 去 单独 去 import Vue ， 
因为 那样 会 增加 包 体 积 ， 丙 以 就 通过 这 种 方式 拿 到 vue 对 象 。 


Vue-Ronuter 安装 最 重要 的 一 步 就 是 利用 vue.mixin 去 把 beforecreate 和 destroyed 钩子 函数 
注入 到 每 一 个 组 件 中 。 Vvue .mixin 的 定义 ， 在 Vue/srcVvcore/global-apiVXmixin.Jjs 中 : 


export function initMixin (Vue: GlobalAPI) 攻 
Vue .mixin = function (mixin: Object) 
this,options = mergeoptions(this,.options，mixin) 
ceturntnas 


它 的 实现 实际 上 非常 简单 ， 就 是 把 要 混和 的 对 象 通过 mergeoption 合并 到 vue 的 options 中 ， 
由 于 每 个 组 件 的 构造 本 数 都 会 在 extend 阶段 合并 vue,.options 到 自身 的 options 中 ， 所 以 也 
就 相当 于 每 个 组 件 都 定义 了 _mixin 定义 的 选项 。 


回 到 vue-Router 的 install 方法 ， 先 看 混 人 的 beforecreated 钩子 函数 ， 对 于 根 vue 实例 
而 言 ， 执 行 该 钧 子 范 数 时 定义 了 this._ routerRoot 表示 它 自 身 ; this._router 表示 
VueRouter 的 实例 router ， 它 是 在 _new vue 的 时 候 传 人 的 ; 另外 执行 了 
this._router.init() 方法 筷 始 化 router ， 这 个 逻辑 之 后 介绍 ， 然 后 用 defineReactive 方法 
把 this._route 变 成 响应 式 对 象 ， 这 个 作用 我 们 之 后 会 介绍 。 而 对 于 子 组 件 而 言 ， 由 于 组 件 是 树 状 
结构 ， 在 通 历 组 件 树 的 过 程 中 ， 它 们 在 执行 该 钩子 函数 的 时 候 this._routerRoot 始终 指向 的 是 根 
Vvue 实例 。 


对 于 _ beforecreated 和 destroyed 钩子 函数 ， 它 们 都 会 执行 registerInstance 方法 ， 这 个 方 
法 的 作用 我 们 也 是 之 后 会 介绍 。 


接着 给 Vue 原型 上 定义 了 $router 和 $route 2 个 属性 的 get 方法 ， 这 可 是 为 什么 我 们 可 以 在 组 件 
实例 上 可 以 访问 this.$router 以 及 this.$route ， 它 们 的 作用 之 后 介绍 。 


接着 又 通过 Vvue.component 方法 定义 了 全 局 的 <router-Link> 和 <router-view> 2 个 组 件 ， 这 
也 是 为 什么 我 们 在 罕 模 板 的 时 候 可 以 使 用 这 两 个 标签 ， 它 们 的 作用 也 是 之 后 介绍 。 


最 后 定义 了 路 由 中 的 钩子 函数 的 合并 策略 ， 和 普通 的 钧 子 函 数 一 样 。 


总 结 

那么 到 此 为 止 ， 我 们 分 析 了 Vue-Router 的 安装 过 程 ，Vue 编写 插件 的 时 候 一 定 要 提供 静态 的 

install 方法 ， 我 们 通过 vue.use(pLugin) 时 候 ， 就 是 在 执行 instal1l 方法 。 Vvue-Router 的 
install 方法 会 给 每 一 个 组 件 注入 _ beforecreated 和 destoryed 钩子 函数 ， 在 
beforecreated 做 一 些 私 有 属性 定义 和 路 由 初始 化 工作 ， 下 一 节 我 们 就 来 分 析 一 下 _vueRouter 对 
象 的 实现 和 它 的 初始 化 工作 。 
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VueRouter 对 象 
VueRonuter 的 实现 是 一 个 类 ， 我 们 先 对 它 做 一 个 简单 地 分 析 ， 它 的 定义 在 srcyindex.js 中 : 


export default class VueRouter { 
Static instal1: () => Volid ; 
Static version: String ; 


app， any'， 

apps: Array<any>， 

ready: boolean; 

readycbs: Array<Function>; 

options: RouterOoptions ; 

mode: string'; 

history: HashHistory | HTML5History | AbstractHistory 
matcher: Matcher ; 

fallback: boolean ， 

beforeHooks: Array<?NavigatIionGuard>; 
resolveHooks: Array<?NavigationGuard>:; 
afterHooks: Array<?AfterNavigationHook>， 


constructor (options: RouteroOptions = {}) { 
this.app = nu]1 
this,apps = [] 
thizs.options = options 
this,beforeHooks = [] 
this,.resolveHooks = [] 
this,afterHooks = [] 


this,.matcher = createMatcher(options ,routes || [中 ，this) 
let mode = options .mode || hash 
this.fallback = mode === 'history'&& !supportsPushState && options .fallback != 
= false 
If (this.fallback) 区 
mode = "hash'， 
】} 


If (!inBrowser) 荆 
mode = 'abstract' 


thizs.mode = mode 


Switch (mode) 苇 
case 'history ' : 
this,history = new HTML5History(this，options,base) 
break 
Casemnhnasho' 
this,history = new HashHistory(this，options.base，this.fallback) 
break 


Caser abstrace 
this,history = new AbstractHistory(this，options.base) 


break 
defaujlt : 
if (process.env,NODE_ENV !== "production') 苹 
assert(false， Invalid mode: $tmode} ) 
】} 
match (人 


raw: RawLocation， 
current?2: Route， 
redirectedFrom?: Location 
Route 于 
return thizs,matcher.match(raw，current，redirectedFrom) 


get currentRoute (): ?Route { 


return this,history && this.history,.current 


init (app: any) { 


process.env.NODE_ENV !== "production'” && assert( 
instal1,iInstalled,， 
inot rnstalledq MakersureitoicaN Vuesuse(tVueRouterN 
"before creating root instance. 


this.apps.push(app) 


if (this,app) 区 
return 


this,app = app 


const history = this,history 


if (history instanceof HTML5HIistory) 六 
history,transitionTo(history.getCurrentLocation( ) ) 
} else if (history instanceof HashHistory) 革 
const SetupHashListener = () => { 
history,SetupListeners() 
history.transitionTo( 
history.getCurrentLocation( )， 
SetupHashListener， 
SetupHashListener 


history,1isten(route => 并 
this,apps,forEach((app) => 攻 
app,_route = route 
了]) 
了]) 


beforeEach (fn: Function): Function 攻 
return registerHook(this.beforeHooks，fn) 


beforeResolve (fn: Function): Function 攻 
return registerHook(this.resolveHooks，fn) 


afterEach (fn: Function): Function 1{ 
return registerHook(this,.afterHooks，fn) 


onReady (cb: Function，errorCb?: Function) 攻 
this.history.onReady(cb，errorcCpb ) 


onError (errorCcb: Function) 攻 
this,history.onError(errorcb) 


push (location: RawLocation，oncompJlete?: Function，onAbort?: FunctiIon) 攻 
this.history.push(Jocation，oncompJlete，onAbort ) 


replace (location: RawLocation，onCcompJlete?: Function，onAbort?: Function) 攻 
this,history.replace(1Location，oncompJlete，onAbort ) 


go (n: number) 1{ 
this,history.go(n) 


back () { 
this,go(-1I) 


forward () 荆 
this.go(1) 


getMatchedComponents (to?: RawLocation | Route): Array<any> 攻 
const route: any = to 
? to.matched 


?2 to 
thizs,resolve(to).route 
this,currentRoute 
If (!route) 攻 
Petunnnl 同 
】} 
return [].concat,apply([]，route.matched ,map(m => 
return 0bject.keys(m,components ) ,map(key => { 
return m.Components[key] 
]) 
】}) ) 


reSolve (人 
to: RawLocation， 
current?3: Route， 
append?: boolean 
): 攻 
Jocation: Location， 
route: Route， 
href: string， 
normalizedTo: Location， 
resolved: Route 
站 人 
const location = normalizeLocation( 
to， 
current || this,.history,current， 
append ， 
屯 nais 
) 
const route = this.match(lLocation，current) 
const fulJPath = route,redirectedFrom || route.ful1lPath 
const base = thlis.history,base 
const href = createHref(base，fu]llPath，this.mode) 
return 并 
Jocation， 
routey， 
href， 
normalizedTo: location， 
resolved: route 


addRoutes (routes: Array<RoutecCconfig>) { 
this.matcher.addRoutes(routes ) 
if (this,history,current !== START) 1{ 
this,.history.transitionTo(this.history,.getCurrentLocation( ) ) 


VueRouter 定义 了 一 些 属 性 和 方法 ， 我 们 先 从 它 的 构造 本 数 看 ， 当 我 们 执行 new vueRouter 的 时 
候 做 了 哪些 事情 。 


constructor (options: RouteroOptions = {}) 攻 
this,app = nul1 
this,.apps = [] 
this,options = options 
this,beforeHooks = [] 
this,resolveHooks = [] 
this,afterHooks = [] 


this,matcher = createMatcher(options .routes || []，this) 
let mode = options .mode || hash， 
this.fallback = mode === 'history”&& !supportsPushState && options .fallJback !== 
false 
if (this,.fallback) 1{ 
mode = "hash 
】} 


If (!inBrowser) 攻 
mode = 'abstract' 


thlzs.mode = mode 


Switch (mode) 攻 

Case inaskorye: 
this,history = new HTML5History(this，options,base) 
break 

Casenasihnee 
this,history = new HashHistory(this，options.base，this.fallback) 
break 

Caseaabstract 
this,.history = new AbstractHistory(this，options.base) 


break 
defauies 
If (process,.env.NODE_ENV !== "production' ) 革 
assert(false， Invalid mode: ${tmode} -) 


构造 画 数 定义 了 一 些 属性 ， 其 中 this.app 表示 根 Vvue 实例 ， this.apps 保存 所 有 子 组 件 的 
Vue 实例 ， thIis,options 保存 传人 的 路 由 配置 ， this,beforeHooks 、 

this.resolveHooks 、 this.afterHooks 表示 一 些 钩子 函数 ， 我 们 之 后 会 介绍 ， this.matcher 
表示 路 由 匹配 器 ， 我 们 之 后 会 介绍 ， this.fallback 表示 路 由 创建 失败 的 回调 函数 ， this.mode 
表示 路 由 创建 的 模式 ， this.history 表示 路 由 历史 的 具体 的 实现 实例 ， 它 是 根据 this.mode 的 不 
同 实现 不 同 ， 它 有 HIstory 基 类 ， 然后 不 同 的 history 实现 都 是 继承 History ， 这 块 我 们 之 后 
会 重点 讲 。 


实例 化 _vueRouter 后 会 返回 它 的 实例 router ， 我 们 在 new vue 的 时 候 会 把 router 作为 配置 


的 属性 传人 ， 回 顾 一 下 上 一 节 我 们 讲 beforecreated 混和 人 的 时 候 有 这 么 一 段 代 码 : 


beforecCreated() 攻 
If (IsDef(thlis.$options.router)) 
鸭 作 
this, router = this.$options.router 
this._router,init(this) 
区 


所 以 每 个 组 件 在 执行 beforecreated 钩子 函数 的 时 候 ， 都 会 执行 router .init 方法 : 


init (app: any) 1{ 


process.env.NODE_ENV !== "production” && assert( 
Instal1.installed， 
UnotimsktalledMakeesurneneoncalnNVueuse(VueRoukterWN 


before creating root Instance . 


this.apps.push(app) 


if (this,app) 区 
return 


this,app = app 


const history = this,history 


if (history instanceof HTML5History) { 
history,transitionTo(history.getCurrentLocation( ) ) 
} else if (history instanceof HashHistory) 区 
const SetupHashListener = () => 1 
history,SetupListeners() 
} 
history,transitionTo( 
history,getCurrentLocation( )， 
SetupHashListener， 
SetupHashListener 


history.1Listen(route => 于 
thizs.apps.forEach((app) => 并 
app._route = route 
了]) 
了]) 


init 的 逻辑 很 简单 ， 它 传人 的 参数 是 _vue 实例 ， 然 后 存储 到 this.apps 中 ; 只 有 根 vue 实例 
会 保存 到 this.app 中 ， 并 且 会 拿 到 当前 的 this.history ， 根 据 它 的 不 同类 型 来 执行 不 同 逻 辑 ， 
由 于 我 们 平时 使 用 hash 路 由 多 一 些 ， 所 以 我 们 先 看 这 部 分 逻辑 ， 允 定义 了 setupHashListener 
本 数 ， 接着 执行 了 history.transitionTo 方法 ， 它 是 定义 在 HIstory 基 类 中 ， 代码 在 


SrcV/history/pase.js .， 


transitionTo (Location: RawLocation，oncomplete?: FunctIion，onAbort?: Function) 并 
const route = this,.router.match(JLJocation，this,current) 
OO 


我 们 先 不 着 急 去 看 transitionTo 的 县 体 实 现 ， 先 看 第 一 行 代 码 ， 它 调用 了 this.router.match 
函数 : 


match ( 
raw: RawLocation， 
current?: Routey， 
redirectedFrom?: Location 
): Route 1 
return thzs.matcher ,match(raw，current，redirectedFrom) 


】} 


实际 上 是 调用 了 this.matcher.match 方法 去 做 匹配 ， 所 以 接 下 来 我 们 先 来 了 解 一 下 _ matcher 的 
相关 实现 。 


总 疆 


4 了 呈 


通过 这 一 节 的 分 析 ， 我 们 大 致 对 vueRouter 类 有 了 大 致 了 解 ， 知 道 了 它 的 一 些 属性 和 方法 ， 同 时 了 
了 解 到 在 组 件 的 初始 化 阶段 ， 执 行 到 beforecreated 钩子 函数 的 时 候 会 执行 router .init 方法 ， 
然后 又 会 执行 history.transitionTo 方法 做 路 由 过 渡 ， 进 而 引出 了 _ matcher 的 概念 ， 接 下 来 我 
们 先 研究 一 下 _matcher 的 相关 实现 。 


matcher 


matcher 相关 的 实现 都 在 src/create-matcher.js 中 ， 我 们 先 来 看 一 下 _matcher 的 数据 结构 : 


export type Matcher = 
match: (raw: RawLocation，current?: Route，redirectedFrom?: Location) => Route ' 
addRoutes: (routes: Array<RouteConfig>) => Vold ; 


】; 


Matcher 返回 了 2 个 方法 ， match 和 addRoutes ， 在 上 一 节 我 们 接触 到 了 _ match 方法 ， 顾 名 思 
义 它 是 做 匹配 ， 那 么 匹配 的 是 什么 ， 在 介绍 之 前 ， 我 们 先 了 解 路 由 中 重要 的 2 个 概念 ， Loaction 和 
Route ， 它 们 的 数据 结构 定义 在 flow/declarations.js 中 。 


e [Location 


declare type Location = 苹 
_normalized?: boolean， 
name?: String' 
path?: String' 
hash?: String' 
query?: Dictionary<Sstring>; 
params?: Dictionary<Sstring>; 
append?: boolean 
replace?: boolean 


Vue-Ronuter 中 定义 的 Location 数据 结构 和 浏览 器 提供 的 window.1location 部 分 双 we 
们 都 是 对 url 的 结构 化 描述 。 举 个 例子 : /abc?foo=bar&baz=qux#he11o ， 它 的 p 
/abc ， query 是 {foo:bar,baz:qux}y 。 Location 的 其 他 属性 我 们 之 后 会 介绍 


e Ronte 


declare type Route = { 
path: String; 
name: ?String ' 
hash: String; 
query: Dictionary<Sstring>; 
params: Dictionary<String>， 
fu]llLPath: string; 
matched: Array<RouteRecord>， 
redirectedFrom?: String; 
meta?: any' 


Route 表示 的 是 路 由 中 的 一 条 线路 ， 它 除了 描述 了 类 似 Loctaion 的 path 、 query 、 hash 这 
些 概 念 ， 还 有 matched 表示 匹配 到 的 所 有 的 RouteRecord 。 Route 的 其 他 属性 我 们 之 后 会 介 
绍 。 


CreateMatcher 


在 了 解 了 Location 和 Route 后 ， 我 们 来 看 一 下 _matcher 的 创建 过 程 : 


export function createMatcher (人 
routes: Array<RouteConfig>， 
FouterVueRouter 
): Matcher 攻 
const { pathList，pathMap，nameMap } = createRouteMap (routes ) 


function addRoutes (routes) 并 
createRouteMap(routes，pathList，pathMap，nameMap ) 


function match ( 
raw: RawLocation， 
CUurrentRoute2: Route， 
redirectedFrom?: Location 
) OUUROUEee 
const Jocation = normalizeLocation(raw，currentRoute，Talse，router ) 


const { name } = location 


If (name) 革 
const record = nameMap [name] 
If (process.env.NODE_ENV !== "production' ) 革 
warn(record， Route with name "$tname}” does not exist ) 
if (!record) return _createRoute(nul1，Jlocation) 
const paramNames = record.regex,.keys 
,filter(key => !key.optional) 
.map(key => key.name) 


if (typeof location.params !== 'object') 革 
Location.params = 1{} 
If (currentRoute && typeof currentRoute.params === "object' ) 攻 
for (const key in currentRoute,.params) 革 
If (!(key in location,.params) && paramNames.indexof(key) > -1) 攻 
1Location.params[key] = currentRoute,params[key] 
】 


If (record) 攻 


Location.path = fillParams(record,.path，1lLocation.params， named route "$fna 
me}” ) 
return _createRoute(record，1ocation，redirectedFrom) 
} else if (location.path) 荆 
Jocation.params = 1{} 
for (let IIL= 0; 工 < pathList.Jength; i++) 六 
const path = pathList[Ii] 
const record = pathMap[path] 
If (matchRoute(record.regex，Jlocation.path，1JlLocation.params)) 芒 
return _createRoute(record，1location，redirectedFrom) 


return _createRoute(nul1，1Location) 


[Ch 


function _createRoute (人 
record: ?RouteRecord ， 
Oocataonmliocatmnori 
redirectedFrom?: Location 
REIROUEe 王 人 
If (record && record.redirect) 荆 
return redirect(record，redirectedFrom || Location) 
】} 
If (record && record ,matchAs) 革 
return alias(record，]location，record.matchAs ) 


return createRoute(record，1Jlocation，redirectedFrom，router ) 


FetumnmEt 
match ， 
addRoutes 


createMatcher 接收 2 个 参数 ， 一 个 是 _ router ， 它 是 我 们 new vueRouter 返回 的 实例 ， 一 个 是 


routes ， 它 是 用 户 定义 的 路 由 配置 ， 来 看 一 下 我 们 之 前 举 的 例子 中 的 配置 : 


const Foo = { template: '<div>foo</div>'” } 


const Bar ={ tempJlate: "<div>bar</div>” } 


const routes = [ 
{ path: /foo'"，component : Foo }， 
{ path: '" /par '，component: Bar } 


createMathcer 首先 执行 的 逻辑 是 const { pathList，pathMap，nameMap } = 
createRouteMap (routes ) 创建 一 个 路 由 映射 表 ， createRouteMap 的 定义 在 src/create-route- 
map 中 : 


export function createRouteMap (人 
routes: Array<RouteConfig>， 
oldPathList?: Array<Sstring>， 
oldPathMap?: Dictionary<RouteRecord>， 
oldNameMap?: Dictionary<RouteRecord> 
JE 
pathList: Array<String>， 
pathMap: Dictionary<RouteRecord>; 
nameMap: Dictionary<RouteRecord>， 
JE 
const pathList: Array<string> = 01LdPathList || 襄 
const pathMap: Dictionary<RouteRecord> = 01dPathMap || 0bject.create(null) 
const nameMap: Dictionary<RouteRecord> = 01dNameMap || 0pbject.create(null) 


routes .forEach(route => 1{ 
addRouteRecord(pathList，pathMap，nameMap，route) 
了 ) 


for (let 工 =0，1L1= pathList.LIength; 工 < 工 工 ++) 革 
if (pathList[I] === '*') { 
pathList,.push(pathList,.Ssplice(I，1)[0]) 
医 


1 


return 并 
pathList， 
pathMap， 
nameMap 


createRouteMap 画 数 的 目标 是 把 用 户 的 路 由 配置 转换 成 一 张 路 由 映射 表 ， 它 包含 3 个 吉 

分 ， pathList 存储 所 有 的 path ， pathMap 表示 一 个 path 到 RouteRecord 的 映射 关系 ， 而 
nameMap 表示 name 到 RouteRecord 的 映射 关系 。 那 么 RouteRecord 到 底 是 什么 ， 先 来 看 一 下 
它 的 数据 结构 : 


declare type RouteRecord = { 
path: String; 
regex: RouteRegEXxp， 
components: Dictionary<any>， 
Instances: Dictionary<any>; 
name: ?String' 
parent: ?RouteRecord ; 


redirect: ?Redirectoption; 

matchAs: ?string ; 

beforeEnter: ?NavigationGuard ; 

meta: any， 

props: boolean | Object | Function | Dictionary<boolean | Object | Function>， 


它 的 创建 是 通过 历 routes 为 每 一 个 _route 执行 addRouteRecord 方法 生成 条 记录 ， 来 看 
下 它 的 定义 : 


function addRouteRecord (人 
Pathst AnEaY<S 蕊 [的 站 可 之 
pathMap: Dictionary<RouteRecord>， 
nameMap: Dictionary<RouteRecord>， 
route: Routeconfaig， 
parent?: RouteRecord ， 
matchAs?: String 


洲 和 
const { path，name } = route 
If (process,env.NODE_ENV !== "production ') 攻 
assert(path != nul1， "path” is required in a route configuration，) 
aSSert( 
typeof route.component !== ' String'"， 
route confIg "component"”for path: $tString(path | name)} cannot be al 十 
ESstrrngEIOaiuUseraneactualconoonentanstead 
) 
】} 


const pathToRegexpoptions: PathTOoRegexpoptions = route.pathToRegexpoptions || 人 姜 
const normalizedPath = normalizePath( 

path， 

parent， 

pathToRegexpOoptions .strict 


if (typeof route.caseSensitive === 'boolean') { 
pathToRegexpOoptions ,sensitive = route,caseSenslitive 


const record: RouteRecord = { 
path: normalizedPath， 
regex: compiIileRouteRegex(normalizedPath，pathToRegexpOoptions )， 
components: route.components || 1{ default: route,.component }， 
Instances: {]}， 
name， 
parent， 
matchAs ， 
redirect: route.redirect， 
beforeEnter: route.beforeEnter ， 
meta: route ,meta || {)}， 


props: route.props == nu]1l 
? 匡 
route.components 
?2 route,.props 
: { default: route.props } 


If (route.children) 攻 
If (process.env.NODE_ENV !== ' production' ) 革 
If (route.name && !route.redirect && route.children.Ssome(child => /ANXVX?$/.tes 
t(child.path))) 攻 
warn( 

fa]lse， 
ENamedaRouteiebtroutesnnmame has adefaulcEchnrrdEouteaa 
WwWneninavugatungEEOoREnrsanamedagroutealcos= name: rouEceasname aa 二 
the default child route will not be rendered，Remove the name from ”十 
EusEroOuteanduuseetnewnamneEotutcnedeftautErcnaladEroutearonnameda 
Lanks anstead 


route.children.forEach(child => 攻 
const childMatchAs = matchAs 
? cleanPath( `$fmatchAs}/X${tchild.path} ) 
undefined 
addRouteRecord(pathList，pathMap，nameMap，child，record，childMatchAs ) 


了]) 


if (route.alias !== undefined) 攻 
const aliases = Array,.IsArray(route.alias ) 
? route,.alias 
[route,.alias] 


aliases,forEach(alias => { 
const aliasRoute = 攻 
path: alias， 
children: route,.children 
addRouteRecord ( 
pathList， 
pathMap， 
nameMap， 
aliasRoutey， 
parent， 
record.path || " /” 


了]) 


If (!pathMap[record.path]) 攻 


pathList.push(record.path) 
pathMap[record.path] = record 


If (name) 革 
If (!nameMap[name]) 攻 
nameMap [name] = record 
} else if (process.env.NODE_ENV !== "production'”&& !matchAs) 革 
warn( 
false， 
iDUplacatejinanedirouteswdefnrtaons + 
EnmamesStnmameripatno ecord 上 Pan 


我 们 只 看 几 个 关键 逻辑 ， 首 和 允 创 建 RouteRecord 的 代码 如 下 : 


const record: RouteRecord = { 

path: normalizedPath， 

regex: compIleRouteRegex(normalizedPath， pathToRegexpoptions )， 
components: route.components || 1{ default: route,.component }， 
Instances: {]}， 

namey， 

parent， 

matchAs， 

redirect: route.redirect， 

beforeEnter: route.beforeEnter， 


meta: route .meta || 1{1)， 
props: route,.props == nu]l1 
二 


route.components 
?2 route.props 
:fdefault: route,.props } 


这 里 要 注意 几 个 点 ， path 是 规范 化 后 的 路 径 ， 它 会 根据 parent 的 path 做 计算 ; regex 是 一 
个 正则 表达 式 的 扩展 ， 它 利用 了 path-to-regexp 这 个 工具 库 ， 把 path 解析 成 一 个 正则 表达 式 的 
扩展 ， 举 个 例子 : 


var keys = [] 

var re = pathToRegexp('/foo/v:bar' ，keys) 

/Are = VANVfooNV(TANV]+?)N7X?$7 

// keys = [人 name: "bar'，prefix: '/'，delimiter: '/':，optional: false，repeat: fal 
se，pattern: ' [ANXNX]+?' )}] 


components 是 一 个 对 象 ， 通 营 我 们 在 配置 中 写 的 component 实际 上 这 里 会 被 转换 成 
{components: route.component} ， instances 表示 组 件 的 实例 ， 也 是 一 个 对 象 类 型 ; parent 
表示 父 的 RouteRecord ， 因 为 我 们 配置 的 时 候 有 时 候 会 配置 子路 由 ， 所 以 整个 RouteRecord 也 了 驶 
是 一 个 树 型 结构 。 


If (route.children) { 
CA 
route.children.forEach(child => 攻 
const childMatchAs = matchAs 
? cleanPath( $tmatchAs}/v${child.path} ) 
Undefaned 
addRouteRecord(pathList，pathMap，nameMap，child，record，childMatchAs ) 
]) 


如 果 配 置 了 _ children ， 那 么 递 娄 执行 addRouteRecord 方法 ， 并 把 当前 的 record 作为 
parent 传人 ， 通 过 这 样 的 深度 通 历 ， 我 们 就 可 以 拿 到 一 个 _ route 下 的 完整 记录 。 


If (!pathMap[record,.path]) 革 
pathList,.push(record.path) 
pathMap[record.path] = record 


为 pathList 和 pathMap 各 添加 一 条 记录 。 


If (name) 区 
If (!nameMap[name]) 区 
nameMap [name] = record 


Ah 人 


如 果 我 们 在 路 由 配置 中 配置 了 name ， 则 给 nameMap 添加 一 条 记录 。 


由 于 pathList 、 pathMap 、 nameMap 都 是 引用 类 型 ， 所 以 在 通 历 整个 routes 过 程 中 去 执行 
addRouteRecord 方法 ， 会 不 断 给 他 们 添加 数据 。 那 么 经 过 整个 _createRouteMap 方法 的 执行 ， 我 
们 得 到 的 就 是 pathList 、 pathMap 和 nameMap 。 其 中 pathList 是 为 了 记录 路 由 配置 中 的 所 有 
path ， 而 pathMap 和 nameMap 都 是 为 了 通过 path 和 name 能 快速 查 到 对 应 的 


RouteRecord 。 


再 回 到 createMather 画 数 ， 接 下 来 天 定义 了 一 系列 方法 ， 最 后 返回 了 一 个 对 象 。 


returni tt 
match ， 
addRoutes 


也 就 是 说 ， matcher 是 一 个 对 象 ， 它 对 外 暴露 了 _ match 和 addRoutes 方法 。 


addRoutes 


addRoutes 方法 的 作用 是 动态 添加 路 由 配置 ， 因 为 在 实际 开发 中 有 些 场景 是 不 能 提前 把 路 由 写 死 
的 ， 需 要 根据 一 些 条 件 动态 添加 路 由 ， 所 以 Vue-Router 也 提供 了 这 一 接口 : 


function addRoutes (routes) 革 
createRouteMap(routes，pathList，pathMap，nameMap ) 


addRoutes 的 方法 十 分 简单 ， 再 次 调用 _ createRouteMap 即 可 ， 传 人 新 的 routes 配置 ， 由 于 
pathList 、 pathMap 、_ nameMap 都 是 引用 类 型 ， 执 行 addRoutes 后 会 修改 它们 的 值 。 


match 


function match (人 
raw: RawLocation， 
currentRoute2: Route， 
redirectedFrom?: Location 
)EUROUEe 人 
const location = normalizeLocation(raw，currentRoute，TfTalse，router) 
const { name } = location 


If (name) 
const record = nameMap[name] 
If (process.env.NODE_ENV !== ' production' ) 革 
warn(record， Route with name "$tname}+” does not exist ) 
】} 
If (!record)j return _createRoute(nul1，Jlocation) 
const paramNames = record.regex.keys 
,filter(key => !key.optional) 
,map(key => key.name) 


if (typeof location.params !== 'object') 
Jocation.params = 1{} 
】} 
If (currentRoute && typeof currentRoute.params === 'object ' ) 攻 


for (const key in currentRoute.params) 区 
If (!(key in Location,.params) && paramNames.indexof(key) > -1) 攻 
location.params[key] = currentRoute.params[key] 


If (record) 攻 


Jocation.path = fillParams(record.path，1Location.params， named route "${fname} 
| 
return _createRoute(record，1location，redirectedFrom) 


】} 
} else if (location.path) 荆 


Jocation.params = 1{} 
for (let IL= 0; 工 < pathList. Jength; I++) 
const path = pathList[I] 
const record = pathMap[path] 
If (matchRoute(record.regex，JlLocation.path，1JlLocation.params)) 区 
return _createRoute(record，1ocation，redirectedFrom) 


return _createRoute(nul1，]location) 


} 
Eeeesssssesseeeeeeseeeseeeeeeeeeeeeeeeeeeeseag: 世 | 


match 方法 接收 3 个 参数 ， 其 中 raw 是 RawLocation 类 型 ， 它 可 以 是 一 个 url 字符 串 ， 也 可 
以 是 一 个 Location 对 象 ; currentRoute 是 Route 类 型 ， 它 表示 当前 的 路 

径 ; redirectedFrom 和 重 定向 相关 ， 这 里 先 忽 略 。 match 方法 返回 的 是 一 个 路 径 ， 它 的 作用 是 根 
据 传人 的 raw 和 当前 的 路 径 currentRoute 计算 出 一 个 新 的 路 径 并 返回 。 


首先 执行 了 _ normalizeLocation ， 它 的 定义 在 src/util/location.js 中 : 


export function normalizeLocation (人 ( 
raw: RawLocation， 
GUISGnECEEEROULEGE 
append: ?boolean， 
TOUEeEP ESVUEROUEer 
JEOcataon 开 
let next: Location = typeof raw === 'String' ? { path: raw } : raw 
If (next.name || next._normalized) 攻 
return next 


If (!next.path && next,params && current ) 
next = assign({}，next) 
next.,_normalized = true 
const params: any = assign(assign({}，current .params)，next.params ) 
If (current .name) 攻 
next .name = current .name 
next .params = params 
} else if (current .matched.Jength) 攻 
const rawPath = current .matched[current .matched. Length - 1.path 
next.path = fillParams(rawPath，params， path $fcurrent .path} ) 
} else if (process.env,.NODE_ENV !== "production' ) { 
warn(false， relative params _ navigation requires a_ current route,，) 


return next 


】} 
const parsedPath = parsePath(next,.path || ”) 
const basePath = (current && current ,path) || /人 


const path = parsedPath.path 
? resolvePath(parsedPath.path，basePath，append || next.append ) 
: basepPath 


const query = resolveQuery( 
parsedPath.query， 
next ,query， 
router && router.options,.parseQuery 


) 
let hash = next.hash || parsedPath.hash 
If (hash && hash.charAt(90) !==  :##') 区 
hash = “ 夫 {hash} 
】} 
return 并 
_normalized: true， 
path， 
qdUery'v 
hash 


normalizeLocation 方法 的 作用 是 根据 raw ， current 计算 出 新 的 location ， 它 主要 处 理 了 
raw 的 两 种 情况 ， 一 种 是 有 params 且 没 有 path ， 一 种 是 有 path 的 ， 对 于 第 一 种 情况 ， 如 果 
current 有 name ， 则 计算 出 的 location 也 有 name 。 


计算 出 新 的 Location 后 ， 对 location 的 name 和 path 的 两 种 情况 做 了 处 理 。 


@ name 


有 name 的 情况 下 就 根据 nameMap 匹配 到 record ， 它 就 是 一 个 _RouterRecord 对 象 ， 如 果 
record 不 存在 ， 则 匹配 失败 ， 返 回 一 个 空 路 径 ; 然后 拿 到 record 对 应 的 paramNames ， 再 对 比 
currentRoute 中 的 params ， 把 交集 部 分 的 params 添加 到 1location 中 ， 然 后 在 通过 
fillParams 方法 根据 record,.path 和 1location.path 计算 出 location.path ， 最 后 调用 
_CcreateRoute(record，1location，redirectedFrom) 去 生成 一 条 新 路 径 ， 该 方法 我 们 之 后 会 介 


7 
绍 O 


e path 


通过 name 我 们 可 以 很 快 的 找到 record ， 但 是 通过 path 并 不 能 ， 因 为 我 们 计算 后 的 
Location.path 是 一 个 真实 路 径 ， 而 _ record 中 的 path 可 能 会 有 param ， 因 此 需要 对 所 有 的 
pathList 做 顺序 通 历 ， 然后 通过 matchRoute 方法 根据 
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record.regex 、 location.path 、 location.params 匹配 ， 如 果 匹 配 到 则 也 通过 
_CcreateRoute(record，1location，redirectedFrom) 去 生成 一 条 新 路 径 。 因为 是 顺序 南 历 ， 所 以 
我 们 书写 路 由 配置 要 注意 路 径 的 顺序 ， 因 为 写 在 前 面 的 会 优先 尝试 匹配 。 


最 后 我 们 来 看 一 下 _createRoute 的 实现 : 


function _createRoute (人 ( 
record: ?RouteRecord ， 
Jocation: Location， 
redirectedFrom2?: Location 
JROUEGE 人 
If (record && record.redirect) 荆 
return redirect(record，redirectedFrom || location) 
} 
If (record && record.matchAs) 
return alias(record，]Jlocation，record.matchAs ) 
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return createRoute(record，Jlocation，redirectedFrom，router ) 


我 们 先 不 考虑 record.redirect 和 record,matchAs 的 情况 ， 最 终 会 调用 _ createRoute 方法 ， 
它 的 定义 在 src/uitl/route.js 中 : 


export function createRoute (人 
record: ?RouteRecord ， 
Jocation: Location， 
redirectedFrom? : ?Location， 
OUEerVUeROUEeD 
JROUECEE 人 人 
const StringifyQuery = router && router.options.SstringifyQuery 


let query: any = location.dquery || 全 


E[ 司 AL 
query = clone(dquery) 


} catch (e) 全 


const route: Route = 攻 


name: location.name || (record && record ,name)， 
meta: (record && record.meta) || 癸 ， 

path: location.path || 2 / ， 

hash: location.hash || 

quUery， 

params: Location,.params || 全 ， 


fu]l1lPath: getFullPath(1location，SstringifyQuery )， 
matched: record ? formatMatch(record) : [ 
】} 
If (redirectedFrom) 攻 
route.redirectedFrom = getFullPath(redirectedFrom，stringifyQuery) 


return Object.freeze(route) 


j 


createRoute 可 以 根据 record 和 1location 创建 出 来 ， 最 终 返 回 的 是 一 条 Route 路 径 ， 我 们 
之 前 也 介绍 过 它 的 数据 结构 。 在 Vue-Router 中 ， 所 有 的 ”Route 最 终 都 会 通过 createRoute 酚 数 介 
建 ， 并 且 它 最 后 是 不 可 以 被 外 部 修改 的 。 Route 对 象 中 有 一 个 非常 重要 属性 是 matched ， 它 通过 

formatMatch(record) 计算 而 来 : 


function formatMatch (record: ?RouteRecord): Array<RouteRecord> 并 
const res = [] 
while (record) 攻 
res.Uunshift(record ) 
record = record.parent 


return res 


可 以 看 它 是 通过 record 循环 向 上 找 parent ， 只 到 找到 最 外 层 ， 并 把 所 有 的 record 都 push 到 
一 个 数组 中 ， 最 终 返 回 的 就 是 record 的 数组 ， 它 记 录 了 一 条 线路 上 的 所 有 record 。 matched 
属性 非常 有 用 ， 它 为 之 后 泻 染 组 件 提供 了 依据 。 


总 结 


那么 到 此 ， matcher 相关 的 主流 程 的 分 析 就 结束 了 ， 我 们 了 解 了 

Location 、 Route 、 RouteRecord 等 概念 。 并 通过 matcher 的 match 方法 ， 我 们 会 找到 匹 
配 的 路 径 Route ， 这 个 对 Route 的 切换 ， 组 件 的 浑 染 都 有 非常 重要 的 指导 意义 。 下 一 节 我 们 会 回 
到 transitionTo 方法 ， 看 一 看 路 径 的 切换 都 做 了 哪些 事情 。 


路 径 切换 


history,transitionTo 是 Vue-Router 中 非常 重要 的 方法 ， 当 我 们 切换 路 由 线路 的 时 候 ， 就 会 执行 到 
该 方法 ， 前 一 节 我 们 分 析 了 matcher 的 相关 实现 ， 知 道 它 是 如 何 找到 匹配 的 新 线路 ， 那 么 匹配 到 新 
线路 后 又 做 了 哪些 事情 ， 接 下 来 我 们 来 完整 分 析 一 下 transitionTo 的 实现 ， 它 的 定义 在 
src/history/base.js 中 : 


transitionTo (location: RawLocation，oncomplete?: FunctIion，onAbort?: Function) 并 
const route = this,.router.match(Jocation，this,current) 
this,confirmTransition(route，() => 革 

this,UupdateRoute(route) 
onCompJlete && onCcompJlete(route) 
this,enSsureURL( ) 


If (!this.ready) 攻 
this,ready = true 
this,readycbs.forEach(cb => { cb(route) }) 
】} 
}，err => 二 
If (onAbort ) 1{ 
onAbort(err ) 
】} 
If (err && !this,ready) 革 
this.ready = true 
this,readyErrorCcbs ,forEach(cb => { cb(err) }) 


}) 


transitionTo 首先 根据 目标 Location 和 当前 路 径 this.current 执行 this.router.match 
方法 去 匹配 到 目标 的 路 径 。 这 里 this,.current 是 history 维护 的 当前 路 径 ， 它 的 初始 值 是 在 
history 的 构造 画 数 中 初始 化 的 : 


thlis,.current = START 


START 的 定义 在 src/util/route,js 中 : 


export const START = createRoute(nu1l1， 攻 
path: '/， 
了]) 


这 样 就 创建 了 一 个 初始 的 Route ， 而 transitionTo 实际 上 也 就 是 在 切换 this.current ， 稍 后 
我 们 会 看 到 。 


拿 到 新 的 路 径 后 ， 那 么 接 下 来 就 会 执行 confirmTransition 方法 去 做 真正 的 切换 ， 由 于 这 个 过 程 可 
能 有 一 些 异 步 的 操作 〈 如 异步 组 件 ) ， 所 以 整个 confirmTransition API 设 计 成 带 有 成 功 回 调 本 数 
和 失败 回调 本 数 ， 先 来 看 一 下 它 的 定义 : 


confirmTransition (route: Route，oncompJlete: Function，onAbort?: Function) 并 
const current = this.current 
const abort = err => 区 
If (IsError(err)) { 
if (this,errorCcbs. length) 苹 
this,errorCbs.forEach(cb => { cb(err) }) 
else ({ 
warn(false， 'uncaught error during route navigation: ') 
conSsole.error(err ) 


】} 

onAbort && onAbort (err ) 
】} 
于 仙人 ( 

IISSameRoute(route，current ) && 

route .matched, length === current .matched,.Jength 
) 荆 


this,enSsureURL( ) 
return abort() 


const 蔷 
Updated， 
deactivated ， 
activated 
} = resolveQueue(this.current .matched，route ,matched ) 


const queue: Array<?NavigationGuard> = [].concat( 
extractLeaveGuards(deactivated )， 
this.router ,beforeHooks， 
extractUpdateHooks(updated )， 
activated.map(m => m,beforeEnter )， 
resolveAsyncComponents(activated ) 


this,pending = route 
const Iterator = (hook: NavigationGuard，next) => 攻 


If (this.pending !== route) 革 
return abort() 
】} 
ay 
hook(route，current，(to: any) => 于 
If (to === false || isError(to)) 革 
this,ensureURLCtrue) 
abort(to) 


else 工人 ( 


typeof to === "String' || 
(typeof to === "object' && (人 
typeof to,path === "String” || 
typeof to,name === ' String 
) ) 
) 苹 
abort() 
If (typeof to === 'object'” && to.replace) 
this.replace(to) 
} else { 
this.push(to) 
} 
Telse 4 
next(to) 
} 


了]) 
Catcchn 本 (Ce 下 攻 


abort(e) 


runQueue(dqueue，iterator，() => 二 
const postEnterCcbs = [] 
const IsValid = () => this.current === route 
const enterGuards = extractEnterGuards(activated，postEnterCcbs，iIsValid) 
const queue = enterGuards,.concat(this.router.resolveHooks ) 
runQueue(queue， iterator，() => 区 
If (this.pending !== route) 革 
return abort() 
this,pending = nul1 
onCompJlete(route) 
if (this.router.app) 六 
this,.router.app.$nextTick(() => 攻 
postEnterCbs.forEach(cb => { cb() }) 


了]) 


了]) 


首先 定义 了 abort 本 数 ， 然 后 判断 如 果 注 足 计算 后 的 route 和 current 是 相同 路 径 的 话 ， 则 让 
接 调用 this.ensureurL 和 abort ， ensureurl 这 个 函数 我 们 之 后 会 介绍 。 


接着 又 根据 _ current .matched 和 route.matched 执行 了 _ resolveQueue 方法 解析 出 3 个 队列 : 


function resolveQueue (人 
current: Array<RouteRecord>， 
next: Array<RouteRecord> 


JE 


Updated: Array<RouteRecord>， 
activated: Array<RouteRecord>， 
deactivated: Array<RouteRecord> 


了 工 
Jet 工 


const max = Mathn.max(current .Jength，next. length ) 
下 OoOT (人 二 三 是 0 二 < maxy) 是 ) 本 攻 
if (current[I] !== next[I]) 区 
break 


出 

return 并 
updated: next.SJice(0， 工 )， 
activated: next,.Slice(I)， 
deactivated: current ,slice(I) 


因为 route.matched 是 一 个 RouteRecord 的 数组 ， 由 于 路 径 是 由 current 变 向 route ， 那 么 
就 吏 历 对 比 2 边 的 RouteRecord ， 找 到 一 个 不 一 样 的 位 置  ， 那 么 next 中 从 0 到 i 的 
RouteRecord 是 两 边 都 一 样 ， 则 为 updated 的 部 分 ; 从 i 到 最 后 的 RouteRecord 是 next 
独 有 的 ， 为 activated 的 部 分 ; 而 current 中 从 i 到 最 后 的 RouteRecord 则 没有 了 ， 为 


deactivated 的 部 分 。 


拿 到 updated 、_ activated 、 deactivated 3 个 ReouteRecord 数组 后 ， 接 下 来 就 是 路 径 变 换 
后 的 一 个 重要 部 分 ， 执 行 一 系列 的 钩子 函数 。 


导航 守卫 
官方 的 说 法 叫 导 航 守 卫 ， 实 际 上 就 是 发 生 在 路 由 路 径 切换 的 时 候 ， 执 行 的 一 系列 钧 子 函 数 。 


我 们 移 从 整体 上 看 一 下 这 些 钧 子 函 数 执行 的 逻辑 ， 首 移 构 造 一 个 队列 queue ， 它 实际 上 是 一 个 数 
组 ; 然后 再 定义 一 个 迭代 器 函数 iterator ; 最 后 再 执行 runQueue 方法 来 执行 这 个 队列 。 我 们 先 
来 看 一 下 _runQueue 的 定义 ， 在 src/util/async.js 中 : 


export function runQueue (queue: Array<?NavigatiIionGuard>，Tfn: Function，cb: Function 
JE 
const Step = index => 荆 
If (index >= queue. Length) 荆 
cb( ) 
helse { 
If (queue[index]) 攻 
fn(queue[index]，() => 攻 
step(index + 工 ) 
]) 
小 RelLse et 
Step(index + 1 工 ) 


】} 


】} 
Step(0) 


】 
4 一 一] 


这 是 一 个 非常 经 典 的 异步 函数 队列 化 执行 的 模式 ， queue 是 一 个 NavigationGuard 类 型 的 数组 ， 
我 们 定义 了 _ step 画 数 ， 每 次 根据 index 从 queue 中 取 一 个 guard ， 然 后 执行 fn 画 数 ， 并 
且 把 guard 作为 参数 传人 ， 第 二 个 参数 是 一 个 函数 ， 当 这 个 函数 执行 的 时 候 再 递归 执行 step 画 
数 ， 前 进 到 下 一 个 ， 注意 这 里 的 fn 就 是 我 们 刚 示 的 iterator 本 数 ， 那么 我 们 再 回 到 iterator 
函数 的 定义 : 


const iterator = (hook: NavigationGuard，next) => { 
if (this,pending !== route) 
return abort() 
】} 
EX 攻 
hook(route，current，(to: any) => 于 
If (to === false || isError(to)) 革 
this.ensureURL(Ctrue) 
abort(to) 
else' If (人 
typeof to === ' String' || 
(typeof to === "object' && (人 
typeof to.path === "string” || 


cm 


typeof to,name === ' String 


) ) 
) 荆 
abort() 
If (typeof to === 'object' && to.replace) 并 
this,.replace(to) 
Jelse 1:{ 
thizs,push(to) 
由 elise 汪 人 
next(to) 
了]) 
Jecuaen 本 (大 
abort(e) 
】} 
】} 


iterator 画 数 逻辑 很 简单 ， 它 就 是 去 执行 每 一 个 导航 守卫 hook ， 并 传人 _ route 、_ current 和 
匿名 本 数 ， 这 些 参数 对 应 文档 中 的 to 、 from 、 next ， 当 执行 了 芽 名 本 数 ， 会 根据 一 些 条 件 执行 
abort 或 next ， 只 有 执行 next 的 时 候 ， 才 会 前 进 到 下 一 个 导航 守卫 钩子 函数 中 ， 这 也 就 是 为 什 
么 官方 文档 会 说 只 有 执行 next 方法 来 resolve 这 个 钩子 本 数 。 


那么 最 后 我 们 来 看 queue 是 怎么 构造 的 : 


const queue: Array<?NavigationGuard> = [].concat( 
extractLeaveGuards(deactivated )， 
this,router,.beforeHooks， 
extractUpdateHooks(updated )， 
activated.map(m => m,beforeEnter )， 
resolveAsyncComponents(activated ) 


按照 顺序 如 下 : 

1. 在 失 活 的 组 件 里 调用 离开 守卫 。 

2. 调用 全 局 的 beforeEach 和 守卫。 

3. 在 重用 的 组 件 里 调用 beforeRouteUpdate 和 守卫 
4. 在 激活 的 路 由 配置 里 调用 beforeEnter 。 

5. 解析 异步 路 由 组 件 。 

接 下 来 我 们 来 分 别 介绍 这 5 步 的 实现 。 


第 一 步 是 通过 执行 extractLeaveGuards(deactivated) ， 先 来 看 一 下 _extractLeaveGuards 的 定 


叉 : 


function extractLeaveGuards (deactivated: Array<RouteRecord>): Array<?Function> 革 
return extractGuards(deactivated， 'beforeRouteLeave'，bindGuard，true) 


它 内 部 调用 了 _ extractGuards 的 通用 方法 ， 可 以 从 _RouteRecord 数组 中 提取 各 个 阶段 的 守卫 : 


function extractGuards (人 
records: Array<RouteRecord>， 
name: String， 
blind: Functilon， 
reverse?: boolean 
): Array<?Function> 攻 
const guards = flatMapComponents(records，(def，instance，match，key) => 并 
const guard = extractGuard(def，name) 
If (guard) 革 
return Array,.IsArray(guard ) 
? guard,map(guard => bind(guard，instance，match，key ) ) 
bind(guard，instance，match， key) 
】} 
了]) 


return flatten(reverse ? guards,reverse() : guards ) 


这 里 用 到 了 flatMapComponents 方法 去 从 _ records 中 获取 所 有 的 导航 ， 它 的 定义 在 


Src/vutil/resolve-components ,js 中 : 


export function flatMapComponents (人 
matched: Array<RouteRecord>， 
让 mWEUTCETEOn 
): Array<?Function> 攻 
return flatten(matched ,map(m => 
return 0bject,.keys(m.components ) .map(key => fn( 
m.Components[key]， 
m.iInstances[Kkey],， 
my，， key 
) ) 
】)) 


export function flatten (arr: Array<any>): Array<any> 并 
return Array.prototype,concat .apply([]，arr) 


flatMapComponents 的 作用 就 是 返回 一 个 数组 ， 数 组 的 元 素 是 从 _matched 里 获取 到 所 有 组 件 的 
key ， 然 后 返回 fn 画 数 执行 的 结果 ， flatten 作用 是 把 二 维 数 组 拍 平 成 一 维 数组 。 


那么 对 于 extractGuards 中 flatMapCcomponents 的 调用 ， 执 行 每 个 fn 的 时 候 ， 通 过 
extractGuard(def，name) 获取 到 组 件 中 对 应 _name 的 导航 守卫 : 


function extractGuard (人 
def: 0bject | Functioni 
key: String 
): NavigationGuard | Array<NavigationGuard> 革 
If (typeof def !== :function' ) 攻 
def = _Vue.extend(def ) 
} 


return def.options[key] 


获取 到 guard 后 ， 还 会 调用 bind 方法 把 组 件 的 实例 instance 作为 本 数 执行 的 上 下 文 绑 定 到 
guard 上 ， bind 方法 的 对 应 的 是 bindGuard 


function bindGuard (guard: NavigationGuard，instance: ?_Vue): ?NavigationGuard 六 
If (instance) 革 
return function boundRouteGuard () { 
return guard.apply(instance，arguments ) 


那么 对 于 extractLeaveGuards(deactivated ) 而 言 ， 获取 到 的 就 是 所 有 失 活 组 件 中 定义 的 
beforeRouteLeave 钩子 函数 。 


第 二 步 是 this.router.beforeHooks ， 在 我 们 的 VvueRouter 类 中 定义 了 beforeEach 方法 ， 在 
src/index.js 中 : 


beforeEach (fn: Function): Function 攻 
return registerHook(this,beforeHooks，fn) 


function registerHook (1List: Array<any>，fn: Function): Function 攻 
Jist,push(fn) 
return () => 
const 工 = list.indexof(fn) 
汪汪 (加 本 之 二 LSskesplace 介 珊 关 相 


当 用 户 使 用 router.beforeEach 注册 了 一 个 全 局 守卫 ， 就 会 往 router.beforeHooks 添加 一 个 钩 
子 函 数 ， 这 样 this.router,.beforeHooks 获取 的 就 是 用 户 注册 的 全 局 beforeEach 守卫 。 


第 三 步 执行 了 _ extractUupdateHooks(updated) ， 来 看 一 下 _extractUpdateHooks 的 定义 : 


function extractUpdateHooks (updated: Array<RouteRecord>): Array<?Function> 区 
return extractGuards(updated， 'beforeRouteuUpdate '，bindGuard ) 


_ 一 | 
有 小 


和 extractLeaveGuards(deactivated) 类 似 ， extractUupdateHooks(updated) 获取 到 的 就 是 所 有 
重用 的 组 件 中 定义 的 beforeRouteUpdate 钩子 函数 。 


第 四 步 是 执行 activated,.map(m => m,.beforeEnter) ， 获 取 的 是 在 激活 的 路 由 配置 中 定义 的 
beforeEnter 本 数 。 


第 五 步 是 执行 resolveAsyncComponents(activated) 解析 异步 组 件 ， 先 来 看 一 下 
resolveAsyncComponents 的 定义 ， 在 Src/vutil/resolve-components .js 中 : 


export function resolveAsyncComponents (matched: Array<RouteRecord>): Function 攻 
return (to，Tfrom，next) => 1 
let hasAsync = false 
Jet pending = 0 
Jet error = nul1 


fJlatMapComponents(matched，(def，_，match，key) => 攻 
if (typeof def === 'function' && def,cid === undefined) 六 
hasAsync = true 
pending++ 


const resolve = once(resolvedDef => { 
If (isESModule(resolvedDef ) ) 攻 


resolvedpef = resolvedDpef .default 

} 

def .resolved = typeof resolvedDef === 'function' 
? resolvedDef 
: _Vue.extend(resolvedDef ) 

match .components[key] = resolvedDef 


pending-- 
If (pending <= 0) 攻 
next() 
了]) 
const reject = once(reason => 革 
const msg = “ Failed to resolve async component ${ftkey}: $freason} 
process,env.NODE_ENV !== "production'&& warn(TfTalse，msg ) 


If (Verror) 攻 
error = IsError(reason ) 
?2 reason 
new Error(msg) 
next(error) 
】 
了]) 


et res 
try 苹 

res = def(resolve，reject ) 
} catch (e) 攻 


reject(e) 
USSSD 
If (typeof res.then === 'function') 1{ 
res .then(resolve，reject) 
} else ({ 
const comp = res,.component 
If (comp && typeof comp .then === 'function') { 
comp .then(resolve，reject) 
】 
了 ) 
If (!hasAsync) next() 
】} 
】} 


resolveAsyncComponents 返回 的 是 一 个 导航 守卫 本 数 ， 有 标准 的 to 、 from 、 next 参数 。 它 
的 内 部 实现 很 简单 ， 利 用 了 flatMapComponents 方法 从 _matched 中 获取 到 每 个 组 件 的 定义 ， 判 断 
如 果 是 异步 组 件 ， 则 执行 异步 组 件 加 载 逻 辑 ， 这 块 和 我 们 之 前 分 析 vue 加 载 异 步 组 件 很 类 似 ， 加 载 


成 功 后 会 执行 match.components[key] = resolvedDef 把 解析 好 的 异步 组 件 放 到 对 应 的 
components 上 ， 并 且 执 行 next 本 数 。 


这 样 在 _ resolveAsynccomponents(activated) 解析 完 所 有 激活 的 异步 组 件 后 ， 我 们 就 可 以 拿 到 这 一 
次 所 有 激活 的 组 件 。 这 样 我 们 在 做 完 这 5 步 后 又 做 了 一 些 事情 : 


runQueue(dqueue， iterator，() => 二 
const postEnterCcbs = [] 
const isValid = () => this,current === route 
const enterGuards = extractEnterGuards(activated，postEnterCcbs，isvValid) 
const queue = enterGuards .concat(this.router,resolveHooks ) 
runQueue(dqueue，iterator，() => 攻 
If (this.pending !== route) 革 
return abort() 
】} 
this.pending = nul1 
onCompJete(route) 
If (this.router.app) 六 
this,router,.app.$nextTick(() => 攻 
postEnterCbs .forEach(cb => { cb() }) 


了 ) 


}) 


1. 在 被 激活 的 组 件 里 调用 beforeRouteEnter 。 
周 用 全 局 的 beforeResolve 守卫。 

周 用 全 局 的 afterEach 钩子 。 

对 于 第 六 步 有 这 些 相关 的 逻辑 : 


< 


2 


< 


3. 


const postEnterCcbs = [] 
const IsValid = () => this,current === route 
const enterGuards = extractEnterGuards(activated，postEnterCcbs，isValid) 


function extractEnterGuards ( 
activated: Array<RouteRecord>， 
cbs: Array<Function>， 
IISValid: () => booJlean 
): Array<?Function> 革 
return extractGuards(activated， ' beforeRouteEnter'，(guard，_，match，Kkey) => { 
return bindEnterGuard(guard，match，Kkey，cbs，isvalid) 


}) 


function bindEnterGuard ( 
guard: NavigationGuard， 
match: RouteRecord ， 


key: strang， 
cbs: Array<Function>， 
ISValid: () => boolean 


\ 一 


: NavigationGuard { 
ecucnmgEftunctaoncoukseEnkEercuardGEcoA roOmaanext 三 
return guard(to，Tfrom，cb => { 
next(cb) 
If (typeof cb === 'function') 六 
cbs.push(() => { 
pollL(cb，match.instances，key，iISsValid) 
了]) 
了]) 
】} 
】} 


functIionmnpoulg( 
COREGIX 
nstancesnobJect 
key: strmngl 
IISValid: () => booJlean 
JE 
if (instances[key]) 区 
cb(instances[key]) 
eseEnfESVadsd 全 由 王 人 
SetTimeout(() => { 
pol1L(cb，instances，key，iISsValid ) 
j，16 ) 
} 
】 


extractEnterGuards 画 数 的 实现 也 是 利用 了 extractGuards 方法 提取 组 件 中 的 
beforeRouteEnter 导航 钧 子 丁 数 ， 和 之 前 不 同 的 是 bind 方法 的 不 同 。 文 档 中 特意 强调 了 
beforeRouteEnter 钩子 函数 中 是 拿 不 到 组 件 实例 的 ， 因 为 当 守 卫 执 行 前 ， 组 件 实例 还 没 被 创建 ， 但 
是 我 们 可 以 通过 传 一 个 回调 给 next 来 访问 组 件 实 例 。 在 导航 被 确认 的 时 候 执 行 回调 ， 并 且 把 组 件 实 
例 作 为 回调 方法 的 参数 : 


beforeRouteEnter (to，Tfrom，next) 革 
next(vm => 革 
// 通过 “`vm`” 访问 组 件 实例 


}) 
】} 


来 看 一 下 这 是 皇 么 实现 的 。 


在 bindEnterGuard 画 数 中 ， 返 回 的 是 routeEnterGuard 画 数 ， 所 以 在 执行 iterator 中 的 
hook 本 数 的 时 候 ， 就 相当 于 执行 routeEnterGuard 画 数 ， 那 么 就 会 执行 我 们 定义 的 导航 守卫 
guard 画 数 ， 并 且 当 这 个 回调 本 数 执行 的 时 候 ， 首 先 执行 next 本 数 rersolve 当前 导航 钩子 ， 


然后 把 回调 函数 的 参数 ， 它 也 是 一 个 回调 本 数 用 cbs 收集 起 来 ， 其 实 就 是 收集 到 外 面 定 义 的 
postEntercbs 中 ， 然 后 在 最 后 会 执行 : 


If (this.router ,app) { 
this,router.app,.$nextTick(() => 革 
postEnterCbs ,forEach(cb => { cb() }) 


】) 


在 根 路 由 组 件 重新 泻 染 后 ， 有 历 postEntercbs 执行 回调 ， 每 一 个 回调 执行 的 时 候 ， 其 实 是 执行 
poll(cb，match.instances，key，isvalid) 方法 ， 因 为 考虑 到 一 些 了 路 由 组 件 被 套 transition 
组 件 在 一 些 缓 动 模式 下 不 一 定 能 拿 到 实例 ， 所 以 用 一 个 轮 询 方法 不 断 去 判断 ， 直 到 能 获取 到 组 件 实 
例 ， 再 去 调用 cb ， 并 把 组 件 实例 作为 参数 传人 ， 这 就 是 我 们 在 回调 函数 中 能 拿 到 组 件 实例 的 原因 。 


第 七 步 是 获取 this.router.resolveHooks ， 这 个 和 this.router.beforeHooks 的 获取 类 似 ， 在 
我 们 的 VvueRouter 类 中 定义 了 beforeResolve 方法 : 


beforeResolve (fn: Function): Function 区 
return registerHook(this,resolveHooks，fn) 


当 用 户 使 用 router ,beforeResolve 注册 了 一 个 全 局 守卫 ， 就 会 往 router.resolveHooks 添加 一 
个 钩子 函数 ， 这 样 this,router,resolveHooks 获取 的 就 是 用 户 注 册 的 全 局 beforeResolve 和 守 
卫 。 


NM| 


第 八 步 是 在 最 后 执行 了 oncomplete(route) 后 ， 会 执行 this.updateRoute(route) 方法 : 


UpdateRoute (route: Route) 攻 
const prev = this.current 
this,current = route 
this,cb && this,cb(route) 
this,router.afterHooks .forEach(hook => { 
hook && hook(route，prev) 


}) 


同样 在 我 们 的 vueRouter 类 中 定义 了 _ afterEach 方法 : 


afterEach (fn: Function): Function 1{ 
return registerHook(this,afterHooks，fn) 


当 用 户 使 用 router.afterEach 注册 了 一 个 全 局 守卫 ， 就 会 往 router.afterHooks 添加 一 个 钩子 
画 数 ， 这 样 this.router.afterHooks 获取 的 就 是 用 户 注册 的 全 局 afterHooks 和 守卫。 


那么 至 此 我 们 把 所 有 导航 守卫 的 执行 分 析 完 毕 了 ， 我 们 知道 路 由 切换 除了 执行 这 些 钩 子 丁 数 ， 从 表象 
上 有 2 个 地 方 会 发 生变 化 ， 一 个 是 url 发 生变 化 ， 一 个 是 组 件 发 生变 化 。 接 下 来 我 们 分 别 介绍 这 两 块 的 
实现 原理 。 


Url 
在 confirmTransition 的 onCompJlete 本 数 中 ， 在 UpdateRoute 后 ， 会 执行 


this.ensureURL() 画 数 ， 这 个 函数 是 子 类 实现 的 ， 不 同 模式 下 该 函数 的 实现 略 有 不 同 ， 我 们 来 看 一 
下 平时 使 用 最 多 的 hash 模式 该 西数 的 实现 ， 在 src/history/hash.js 中 。 


enSsureURL (push?: boolean) 革 
const current = this.current.fulJIPath 
If (getHash() !== current) 
push ? pushHash(current) : repJlaceHash(current ) 


export function getHash (): string { 
const href = window.Jocation.href 
const index = href.indexof( ##') 
return Index === -1? '' : href,slice(index + 工 ) 


function getUrlLl (path) 攻 
const href = window,location.href 
const 工 = href.indexof( '##') 
const base = 工 >=0?href.slice(0，1I) : href 
return “$tbase}#{path} 


function pushHash (path) 
If (SupportsPushState) 1{ 
pushState(getUrlL(path ) ) 
JEelsen 
window.JIocation.hash = path 


function replLaceHash (path) 攻 
If (SupportsPushState) { 
repJlaceState(getUrl(path ) ) 
Jelse 
window,Jlocation.replace(getUrJI(path ) ) 


ensureURL 画 数 首 先 判断 当前 ”hash 和 当前 的 券 路 径 是 否 相 等 ， 如 果 不 相等 ， 则 根据 push 参数 
决定 执行 pushHash 或 者 是 _ replaceHash 。 


SupportsPushState 的 定义 在 Src/util/push-state.js 中 : 


export const SupportsPushState = InBrowser && (function () { 
const ua = window,navigator,.UuUserAgent 


人 人 
(ua.indexof( 'Android 2.') !== -1 |1| ua,indexof('Android 4.0' ) !== -1) && 
ua,indexof( 'Moblile Safari') !== -1 && 
ua.indexof( ' Chrome ') === -1 && 
ua.indexof( 'Windows Phone ') === -1 
) 荆 


return false 


return window.history && :pushState' in window.history 


})() 


如 果 支 持 的 话 ， 则 获取 当前 完整 的 url ， 执 行 pushstate 方法 : 


export function pushsSstate (ur1l2: string， replace?: boolean) { 
SaveScrollPosition() 
const history = window.history 
EN 
If (replace) { 
history,repJlaceState({ key: _key ， ”，uUrl) 
Telse tf 
_key = genkey() 
history,pushState({ key: _key }， ”url) 


} 
Tcatcnuge)Et 
window,.JIocation[repJlace ? 'replace' : 'assign'](Curl) 


pushstate 会 调用 浏览 器 原生 的 history 的 pushstate 接口 或 者 replacestate 接口 ， 更 新 
浏览 器 的 url 地 址 ， 并 把 当前 url 压 人 历史 栈 中 。 


然后 在 history 的 初始 化 中 ， 会 设置 一 个 监听 器 ， 监 听 历 史 栈 的 变化 : 


SetupListeners () 六 
const router = this.router 
const expectScrol1 = router.options,Sscrol1lBehavior 
const SupportsScroll = SupportsPushState && expectScrol1 


If (SupportSsScrol]1) 荆 
SetupScrol1l() 


window,addEventListener(SsupportsPushState ? popstate'” : "hashchange'"，() => 六 


const current = this,current 
If (!ensureSlash()) 攻 
return 
】} 
this,transitionTo(getHash()，route => 1{ 
If (SupportsScrol]1) 攻 
handleScroll(this.router，route，current，true) 
} 
If (!SsupportsPushState) 
repJaceHash(route.ful1lPath ) 


现 
}) 


当 点 击 浏 览 器 返回 按钮 的 时 候 ， 如 果 已 经 有 url 被 压 人 历史 栈 ， 则 会 触发 popstate 事件 ， 然 后 拿 到 
当前 要 跳 转 的 hash ， 执 行 transtionTo 方法 做 一 次 路 径 转 换 。 


同学 们 在 使 用 Vue-Router 开发 项 目的 时 候 ， 打 开 调 试 页 面 http://Localhost:8080 后 会 自动 把 ul 
修改 为 http://localhost:8089/#/ ， 这 是 怎么 做 到 呢 ? 原来 在 实例 化 HashHistory 的 时 候 ， 构 造 
画 数 会 执行 ensureslash() 方法 : 


function ensureSlash (): boolean 苹 
const path = getHash() 
If (path,.charAt(0) === '/ ) 革 
Returnmmnenue 


】} 
replLaceHash( /' + path) 
return false 


这 个 时 候 path 为 宅 ， 所 以 执行 replaceHash('/' + path) ， 然 后 内 部 会 执行 一 次 geturl ， 计 
算出 来 的 新 的 url 为 http://Localhost:8080/#/ ， 这 就 是 url 会 改变 的 原因 。 


组 件 


路 由 最 终 的 浑 染 离 不 开 组 件 ，Vue-Router 内 置 了 <router-view> 组 件 ， 它 的 定义 在 


Src/Vcomponents/view.Jjs 中 。 


export default 1{ 
name: 'RouterView'， 
functional: true， 
props: 攻 
name: 攻 
types strang， 
defaules default 


} 


render (-，{ props，children，parent，data }) 荆 
data.routerView = true 


const h = parent.$createElement 

const name = props.name 

const route = parent ,$route 

const cache = parent,_routerViewCache || (parent.,_routerViewCache = {) 


let depth = 0 
let inactive = false 
while (parent && parent.,_routerRoot !== parent) 
If (parent.$vnode && parent .$vnode.data.routervView) 
depth++ 
If (parent._inactive) 革 
inactive = true 


parent = parent.$parent 


】} 
data,routervViewDepth = depth 


If (inactive) { 
return h(cache[name]，data，children) 


const matched = route.matched[depth] 
If (!matched) 革 
cache[name] = nul1 


return h() 


const component = cache[name] = matched.components[name] 


data.registerRouteInstance = (Vvm，Vval) => 区 
const current = matched.instances[name] 


二 人 人 
(val && current !== Vvm) || 
(!Val && current === Vm) 

) 攻 
matched,instances[name] = Vval 


(data.hook || (data.hook {})).prepatch = (_，vnode) => 荆 
matched.instances[name] = vnode.componentInstance 


Jet propsToPass = data.props = resolveProps(route，matched.props && matched.pro 
ps[name]) 
If (propsToPass) { 
propsToPass = data.props = extend({}，propsToPass ) 


const attrs = data,attrs = data,attrs || 全 
for (const key in propsToPass) { 
If (!component .props || !(key in component .props)) { 
attrs[key] = propsToPass[key] 
delete propsToPass[key] 


return h(Ccomponent，data，children) 


<router-view> 是 一 个 functional 组 件 ， 它 的 滨 染 也 是 依赖 render 画 数 ， 那 么 <router- 
view> 具体 应 该 泻 染 什么 组 件 呢 ， 首 先 获取 当前 的 路 径 : 


const route = parent.,$route 


我 们 之 前 分 析 过 ， 在 srcy/instal1.js 中 ， 我 们 给 Vue 的 原型 上 定义 了 $route 


Object ,defineProperty(Vue.prototype， '$route ，1{ 
get () { return this._routerRoot._route } 


}) 


然后 在 _VvueRouter 的 实例 执行 router .init 方法 的 时 候 ， 会 执行 如 下 逻辑 ， 定 义 在 
src/index.js 中 : 


history. 1isten(route => 二 
thizs,.apps.forEach((app) => 并 
app._route = route 
了]) 
]) 


而 history.1Listen 方法 定义 在 Src/vhistory/base.js 中 : 


Jisten (cb: Function) { 
this,cb = cb 


然后 在 updateRoute 的 时 候 执行 this.cb 


UpdateRoute (route: Route) 六 
/已 生 
this,current = route 
this,cb && this,cb(route) 
Ch 


也 就 是 我 们 执行 transitionTo 方法 最 后 执行 updateRoute 的 时 候 会 执行 回调 ， 然 后 会 更 新 所 有 
组 件 实例 的 _route 值 ， 所 以 说 $route 对 应 的 承 是 当前 的 路 由 线路 。 


<router-view> 是 支持 能 套 的 ， 回 到 render 画 数 ， 其 中 定义 了 _ depth 的 概念 ， 它 表示 
<router-view> 和 做 套 的 深度 。 每 个 <router-view> 在 泻 染 的 时 候 ， 执 行 如 下 逻辑 : 


data.routervView = true 
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while (parent && parent.,_routerRoot !== parent) 区 
If (parent.$vnode && parent .$vnode.data.routervView) { 
depth++ 
】} 


If (parent._inactive) { 
Inactjive = true 


parent = parent.$parent 


const matched = route.matched[depth] 
J 六 


const component = cache[name] = matched.components[name] 


parent._routerRoot 表示 的 是 根 Vue 实例 ， 那 么 这 个 循环 就 是 从 当前 的 <router-view> 的 父 节 
点 向 上 找 ， 一 直 找 到 根 Vue 实例 ， 在 这 个 过 程 ， 如 果 碰 到 了 父 节 点 也 是 <router-view> 的 时 候 ， 说 
明 <router-view> 有 人 嵌 套 的 情况 ， depth++ 。 通 历 完成 后 ， 根 据 当前 线路 匹配 的 路 径 和 depth 
找到 对 应 的 RouteRecord ， 进 而 找到 该 演 染 的 组 件 。 


除了 找到 了 应 该 演 染 的 组 件 ， 还 定义 了 一 个 注册 路 由 实例 的 方法 : 


data.registerRouteInstance = (vm，Vval) => 攻 
const current = matched.instances[name] 


世人 ( 
(val && current !== vm) || 
(!Val && current === Vm) 
,是 | 
matched.instances[name] = Vval 
】} 
】} 


给 vnode 的 data 定义 了 registerRouteInstance 方法 ， 在 src/instal1l.js 中 ， 我 们 会 调用 
该 方法 去 注册 路 由 的 实例 : 


const registerInstance = (vm，callVal) => 攻 
let 工 = vm.$options._parentVnode 
If (IsDef(I) && isDef(1I = 1.data) && isDef(I = 1.registerRouteInstance)) 
工 (vm，callVval) 


J 
】} 


Vue ,mixin( 攻 
beforecCreate () 荆 
2 
registerInstance(thlis，this) 
】， 
destroyed () 攻 
registerInstance(this ) 
】} 
了]) 


在 混和 人 的 beforecreate 钩子 函数 中 ， 会 执行 registerIinstance 方法 ， 进 而 执行 render 本 数 
中 定义 的 registerRouteInstance 方法 ， 从 而 给 matched.instances[name] 赋值 当前 组 件 的 
vm 实例 。 


render 本 数 的 最 后 根据 component 泻 染 出 对 应 的 组 件 vonde  : 


return h(component，data，children) 


那么 当 我 们 执行 transitionTo 来 更 改 路 由 线路 后 ， 组 件 是 如 何 重 新 泻 染 的 呢 ? 在 我 们 混入 的 
beforecreated 钩子 范 数 中 有 这 么 一 段 逻 辑 : 


Vue ,mixin({ 
beforecCreate () 区 
If (IsDef(thlis.$options.router)) 革 
Vue.util.defineReactive(this， "_route'，this,_router,.history.current ) 


j 
CA 


}) 


由 于 我 们 把 根 Vue 实例 的 _route 属性 定义 成 响应 式 的 ， 我 们 在 每 个 <router-view> 执行 
render 画 数 的 时 候 ， 都 会 访问 parent,.$route ， 如 我 们 之 前 分 析 会 访问 

this._routerRoot ,_route ， 触发 了 它 的 getter ， 相当 于 <router-view> 对 它 有 依赖 ， 然后 再 
执行 完 transitionTo 后 ， 修 改 app, route 的 时 候 ， 又 触发 了 setter ， 因 此 会 通知 <router- 
view> 的 泻 染 watcher 更 新 ， 重新 泻 染 组 件 。 


Vue-Router 还 内 置 了 另 一 个 组 件 <router-1Link> 5 它 支 持 用 户 在 具有 路 由 功能 的 应 用 中 〈 点 击 ) 导 
航 。 通过 to 属性 指定 目标 地 址 ， 默 认 浑 染 成 带 有 正确 链接 的 <a> 标签 ， 可 以 通过 配置 tag 属 
性 生成 别 的 标签 。 另 外 ， 当 目标 路 由 成 功 激活 时 ， 链 接 元 素 自 动 设置 一 个 表示 激活 的 CSS 类 名 。 


<router-1link> 比 起 写 死 的 <a href="..."> 会 好 一 些 ， 理由 如 下 : 


无 论 是 HIML5 history 模式 还 是 hash 模式 ， 筷 的 表现 行为 一 致 ， 所 以 ， 当 你 要 切换 路 由 模式 ， 
或 者 在 IE9 降级 使 用 hash 模式 ， 无 须 作 任何 变动 。 


在 HIML5 history 模式 下 ， 


当 你 在 HIML5 history 模式 下 使 用 base 选项 之 后 ， 所 有 的 to 属性 


那么 接 下 来 我 们 就 来 分 析 它 的 实现 ， 它 的 定义 在 src/components/link.js 中 : 


export default { 


name: "RouterLink '， 


props: 攻 


to: 二 


type: toTypes， 


required: true 


}， 


tag: 并 


type: String， 
default: "al' 


}， 


eXxact : 


Boolean， 


append: Boolean， 


repJlace: Boolean， 


activeClass: String， 


eXxactActiveCclass: String， 


event : 


{ 


type: eventTypes， 
default: "click， 


】} 
}， 


render (h: Function) { 


Const 
Const 
Const 
Const 
Const 


Const 
Const 


Const 


Const 


Const 


Const 


router = this.$router 
current = this.$route 
{ location，route，href } = router.resolve(this,to，current， 


classes = 1} 
globalActiveCclass = router,.options,1inkActiveCclass 
globalEXxactActiveCclass = router,.options,1inkEXactActiveClass 
activeClassFallback = globalActiveClass == _ nu]1] 
?3 'router-]ink-active' 
glLlobalActiveC1lass 
exactActiveCclassFallback = globalExactActiveClass == nu]1 
?3 'router-]Link-exact-active' 
glLobalEXxactActiveC1lass 
activeClass = this.activeCclass == nu]1 
? activeClassFallback 
this.activeClass 
exactActiveClass = this.exactActiveClass == nu]1 
?3 exactActiveCclassFal1lback 
this.exactActiveCJlass 
compareTarget = location.path 


? createRoute(nul1，]location，nul1，router) 


route 


router-1Ink 会 守卫 点 击 事件 ， 让 浏览 器 不 再 重新 加 载 页 面 。 
都 不 需要 写 〈 基 路 径 ) 了 。 


this,append) 


Classes[exactActiveClass] = IsSameRoute(current，compareTarget) 
classes[activeClass] = this.exact 
? classes[exactActiveClass] 
isIncludedRoute(current，compareTarget ) 


const handljer = e => { 
If (guardEvent(e)) 革 
If (this.replace) { 
router ,replace(location) 
} else 1{ 
router .push(Location) 


const on = { click: guardEvent } 
寺 (Array,. IsArray(this.event)) 革 
this,event.forEach(e => { on[e]l = handler }) 
} else { 
on[this.event] = handJler 


const data: any = { 
Class: Classes 


If (thlis.tag === 'a ) 
data.on = on 
data.attrs ={ href } 
} else 六 
const a = findAnchor(this.$slots.default) 
计 〈(a) 【 
a.isStatic = false 
const extend = _Vue.util,extend 
const apData = a.data = extend({}+，a.data) 
apData.on = on 
const aAttrs = a,data,attrs = extend({}+，a.data.attrs) 
aAttrs,href = href 
} else { 
data.on = on 


return h(this,tag，data，this,$slots.defauJlt) 


<router-link> 标签 的 泻 染 也 是 基于 render 画 数 ， 它 首 允 做 了 路 由 解析 : 


const router = this.$router 


const current = this,$route 
const { Ilocation，route，href } = router.resolve(this.to，current，this.append ) 


router.resolve 是 vueRouter 的 实例 方法 ， 它 的 定义 在 src/index.js 中 : 


reSolve (人 
to: RawLocation， 
current?: Route， 
append?: boolean 

) :区 
Jocation: Location， 
route: Route， 
href: String， 
normalizedTo: Location， 
reSsolved: Route 


了 荆 


const Location = normalizeLocation( 


to， 
current || this,.history.current， 
append ， 
this 
) 
const route = this,.match(Jocation，current ) 
const fullPath = route.redirectedFrom || route.ful1LPath 


const base = this.history.base 
const href = createHref(base，Tfu1lJlPath，this,mode) 
returnm 

Jocation， 

routey， 

href， 

normalizedTo: location， 

reSsolved: route 


】 

】} 

functcmionicreateNrer basec strzng tuluPatn straznogn node 
var path = mode === 'hash' ?  '#' + fulLlPath : fulJPath 
return base ? cleanPath(base + '/' + path) : path 


它 先 规范 生成 目标 location ， 再 根据 Location 和 match 通过 this,match 方法 计算 生成 目标 


路 径 route ， 然 后 再 根据 base 、 fullPath 和 this.mode 通过 createHref 方法 计算 出 最 终 
跳 转 的 href 。 


解析 完 router 获得 目标 Location 、 route 、 href 后 ， 接 下 来 对 exactActiveclass 和 
activeClass 做 处 理 ， 当 配 置 exact 为 true 的 时 候 ， 只 有 当 目 标 路 径 和 当前 路 径 完全 匹配 的 时 
候 ， 会 添加 exactActiveclass ; 而 当 目标 路 径 包 含 当 前 路 径 的 时 候 ， 会 添加 activeclass 。 


接着 创建 了 一 个 守卫 画 数 : 


const handjer =e => 攻 
If (guardEvent(e)) 革 
if (this,replace) { 
router ,replace(lLocation) 
else { 
router,.push(Location) 


function guardEVvent (e) { 

If (e.metaKkey || e.altkey || e.ctrlKey || e.shiftKey) return 

if (e.defaultPrevented) return 

If (e.button !== undefined && e,button !== 0) return 

If (e.currentTarget && e.currentTarget .getAttribute) 区 
const target = e.currentTarget .getAttribute( 'target ' ) 
if (ZNXbublankxbyi.test(target)) return 

】} 

If (e.preventDefauJlt) 攻 
e.preventDefauJjlt() 

】} 


retunnm true 


const on ={ click: guardEvent } 
if (Array.isArray(this,event)) { 
this.event.forEach(e => { on[e]l = handler }) 
Telse{ 
on[this,.event] = handJler 


最 终 会 监听 点 击 事件 或 者 其 它 可 以 通过 prop 传人 的 事件 类 型 ， 执 行 hanlder 本 数 ， 最 终 执 行 
router.push 或 者 router.replace 画 数 ， 它 们 的 定义 在 src/index.js 中 : 


push (location: RawLocation，oncompJlete?: Function，onAbort?: Function) 攻 
this,history.push(location，oncomplete，onAbort ) 


repJlace (location: RawLocation，oncompJlete?: FunctIion，onAbort?: Function) 六 
this.history,.replace(lLocation，oncompJlete，onAbort ) 


实际 上 就 是 执行 了 _ history 的 push 和 replace 方法 做 路 由 跳 转 。 


最 后 判断 当前 tag 是 否 是 <a> 标签 ， <router-1Link> 默认 会 浑 染 成 <a> 标签 ， 当 然 我 们 也 可 
以 修改 tag 的 prop 浑 染 成 其 他 节点 ， 这 种 情况 下 会 尝试 找 它 子 元 素 的 <a> 标签 ， 如 果 有 则 把 事 
件 绑 定 到 <a> 标签 上 并 添 加 href 属性， 否则 绑 定 到 外 层 元 素 本 身 。 
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那么 至 此 我 们 把 路 由 的 transitionTo 的 主体 过 程 分 析 完 毕 了 ， 其 他 一 些 分 支 比 如 重 定向 、 别 名 、 深 
动 行为 等 同学 们 可 以 自行 再 去 分 析 。 

路 径 变化 是 路 由 中 最 重要 的 功能 ， 我 们 要 记 住 以 下 内 容 : 路 由 始终 会 维护 当前 的 线路 ， 路 由 切换 的 时 
候 会 把 当前 线路 切换 到 目标 线路 ， 切 换 过 程 中 会 执行 一 系列 的 导航 守卫 钧 子 函 数 ， 会 更 改 unl， 同 样 也 
会 渲染 对 应 的 组 件 ， 切 换 完毕 后 会 把 目标 线路 更 新 蔡 换 当前 线路 ， 这 样 就 会 作为 下 一 次 的 路 径 切 换 的 
依据 。 


WuexX 


Vuex 是 一 个 专 为 Vuejjs 应 用 程序 开发 的 状态 管理 模式 。 它 采用 集中 式 存 储 管理 应 用 的 所 有 组 件 的 状 
态 ， 并 以 相应 的 规则 保证 状态 以 一 种 可 预测 的 方式 发 生变 化 。 


什么 是 “状态 管理 模式 ”? 
让 我 们 从 一 个 简单 的 Vue 计数 应 用 开始 : 


new Vue({ 
SeaEe 
data () 革 
ecurnE 二 
Count : 0 
】} 
】， 
// View 
template: 
<div>{{t count }}</div> 


// actions 
methods: 攻 
Increment () 攻 
this,.Ccount++ 
】} 
】} 
]) 


这 个 状态 自 管理 应 用 包含 以 下 几 个 部 分 : 


。 state， 张 动 应 用 的 数据 源 ; 
e。 view， 以 声明 方式 将 state 映射 到 视图 ; 
eactions， 响 应 在 view 上 的 用 户 输 入 导致 的 状态 变化 。 


以 下 是 一 个 表示 "“ 单 向 数据 流 ” 理 念 的 极 简 示 意 : 


/TODO 图 片 

但 是 ， 当 我 们 的 应 用 遇 到 多 个 组 件 共 享 状 态 时 ， 单 向 数据 流 的 简洁 性 很 容易 被 破坏 : 
e。 多 个 视图 依赖 于 同一 状态 。 
。 来 自 不 同 视 图 的 行为 需要 变更 同一 状态 。 


对 于 问题 一 ， 传 参 的 方法 对 于 多 层 髓 套 的 组 件 将 会 非常 繁 珊 ， 并 且 对 于 兄弟 组 件 间 的 状态 传递 无 能 关 
力 。 对 于 问题 二 ， 我 们 经 常会 采用 父子 组 件 直接 引用 或 者 通过 事件 来 变更 和 同步 状态 的 多 份 拷贝 。 以 
上 的 这 些 模式 非常 脆弱 ， 通 常会 导致 无 法 维护 的 代码 。 


因此 ， 我 们 为 什么 不 把 组 件 的 共享 状态 抽取 出 来 ， 以 一 个 全 局 单 例 模 式 管理 呢 ? 在 这 种 模式 下 ， 我 们 
的 组 件 树 构成 了 一 个 巨大 的 “视图 ”， 不 管 在 树 的 哪个 位 置 ， 任 何 组 件 都 能 获取 状态 或 者 触发 行为 。 


VueXxX 核心 思 直 


Vuex 应 用 的 核心 就 是 store 〈 仓 库 ) 。 "store” 基 本 上 就 是 一 个 容器 ， 它 包含 着 你 的 应 用 中 大 部 分 的 状态 
Cstatej。 有 些 同学 可 能 会 问 ， 那 我 定义 一 个 全 局 对 象 ， 再 去 上 层 封 装 了 一 些 数据 存 取 的 接口 不 也 可 以 
么 ? 


Vuex 和 单纯 的 全 局 对 象 有 以 下 两 点 不 同 : 


。 Vuex 的 状态 存储 是 响应 式 的 。 当 Vue 组 件 从 store 中 读 取 状 态 的 时 候 ， 若 store 中 的 状态 发 生变 
化 ， 那 么 相应 的 组 件 也 会 相应 地 得 到 高 效 更 新 。 

。 你 不 能 直接 改变 store 中 的 状态 。 改 变 store 中 的 状态 的 唯一 途径 就 是 显 式 地 提交 (commib 
mnutation。 这 样 使 得 我 们 可 以 方便 地 跟踪 每 一 个 状态 的 变化 ， 从 而 让 我 们 能 够 实现 一 些 工 具 
们 更 好 地 了 解 我 们 的 应 用 。 

另外 ， 通 过 定义 和 隔离 状态 管理 中 的 各 种 概念 并 强制 遵守 一 定 的 规则 ， 我 们 的 代码 将 会 变 得 更 结构 化 
且 易 维护 。 


洪 
到 
注 


/TODO 图 片 


Vuex 初始 化 
这 一 节 我 们 主要 来 分 析 Vuex 的 初始 化 过 程 ， 它 包括 安装 、Store 实例 化 过 程 2 个 方面 。 
安装 


当 我 们 在 代码 中 通过 import Vuex from 'vuex' 的 时 候 ， 实 际 上 引用 的 是 一 个 对 象 ， 它 的 定义 在 
src/index.js 中 : 


export default 1{ 
Storey/ 
Instal1， 
Verslion: "VERSION _ _ '， 
mapState'， 
mapMutations， 
mapGetters， 
mapActions， 
createNamespacedHeJpers 


和 Vue-Router 一 样 ，Vuex 也 同样 存在 一 个 静态 的 install 方法 ， 它 的 定义 在 src/store.js 中 : 


exXport ftunctaonanstalll (aaVue){ 
If (Vue && _Vue === Vue) 
if (process.env,.NODE_ENV !== "production') 攻 
Console,error( 


[LVuexjEalreadysrnstaniedVuesuselVue>x9EEshoundipbescanledonlyEoncean 


】} 


return 


Vue = _Vue 
appJyMixin(Vue) 


instal1l 的 逻辑 很 简单 ， 把 传人 的 _vue 赋值 给 vue 并 执行 了 applyMixin(vue) 方法 ， 它 的 定 
义 在 SrcVmixin.js 中 : 


export default functionm (Vue) 
const version = Number(Vue.version.Ssplit('".')[9]) 


If (verslion >= 2) 
Vue .mixin({t beforeCcreate: VUexInit }) 

helse 
// override init and inject Vvuex init procedure 
// for 1.x backwards compatibility， 


const _init = Vue.prototype._init 
Vue,.prototype,_init = function (options = {) 攻 
options.init = options.Injit 
? [vuexInit].concat(options,init) 
: VUeXxInit 
_init,.call(this，options) 


* Vuex init hook，injected into each instances init hooks 11st， 
2 


functaonvuexInati( 大 
const options = this,$options 
// Store injection 
If (options ,store) 
this.$store = typeof options,store === 'function' 
? options,store() 
: options,Sstore 
} else If (options.parent && options,.parent.$store) 革 
this,$store = options.parent.$store 


applayMixin 就 是 这 个 export default function ， 它 还 兼容 了 Vue 1.0 的 版 本 ， 这 里 我 们 只 关注 

Vue 2.0 以 上 版 本 的 逻辑 ， 它 其 实 就 全 局 混 人 了 一 个 beforecreated 钩子 函数 ， 它 的 实现 非常 简单 ， 
就 是 把 options.store 保存 在 所 有 组 件 的 this.$store 中 ， 这 个 options.store 就 是 我 们 在 实 
例 化 Store 对 象 的 实例 ， 稍 后 我 们 会 介绍 ， 这 也 是 为 什么 我 们 在 组 件 中 可 以 通过 this.$store 访 
问 到 这 个 实例 。 


Store 实例 化 


我 们 在 import vuex 之 后 ， 会 实例 化 其 中 的 store 对 象 ， 返 回 store 实例 并 传人 new vue 的 
options 中 ， 也 就 是 我 们 刚才 提 到 的 options.store 


举 个 简单 的 例子 ， 如 下 : 


export default new Vuex.Store({ 
actions， 
getters， 
State， 
mutations， 
moduJles 
汐 和 0 


]) 


Store 对 象 的 构造 本 数 接收 一 个 对 象 参数 ， 它 包含 
actions 、 getters 、 state 、_ mutations 、 modules 等 Vuex 的 核心 概念 ， 它 的 定义 在 


src/store.js 中 : 


exXxport class Store 
constructor (options = 全 ) 攻 
// Auto install if it is not done yet and -window ”has `Vue ， 
// To allow users to avoid auto-Installation In Some cases， 
// this code should be placed here， See #731 
If (!Vue && typeof window !== "undefined' && window,Vue) 攻 
install(window,Vue) 


If (process ,env,.NODE_ENV !== "production' ) 攻 
assernk(VuenmustcaVuesuse(Vuex)mbeforeEcreatrnogEEaESstonewnstarcey) 
assertltypeofpromazseE== undefrnedu ucexinrequresaPromrse polyfournilit 

his browser，,，) 
assert(this instanceof Store， Store must be called with the new operator. ) 


Const 1{ 
plugins = []， 
Strict = false 
} = options 


// store internal State 

this._committing = false 

this,_ actions = 0bject,create(nu]1) 
thizs,_actionSubscribers = [] 

this, mutations = Object,create(nu]1) 

this._ wrappedGetters = 0bject,create(nul1) 
this.,_ modules = new Modulecollection(options ) 
this._ modulesNamespaceMap = 0bject,create(null) 
this,_Ssubscribers = [] 

this, watchervM = new Vue() 


// bind commit and dispatch to Sejlf 

const store = this 

const { dispatch，commit } = this 

this.dispatch = function boundDispatch (type，pay1load) 荆 
return dispatch.call(store，type，pay1load ) 

】} 

this,commit = function boundCommit (type，payJload，options) 攻 
return commit.call(store，type，pay1load，options ) 


// strict mode 
SEESrcicte 三 SiC 


const state = thlis. modules.root.state 


rnaiealzookcamnodues 

// this also recursively registers al1l sub-modules 

// and collects all1 module getters inside this._ wrappedGetters 
InstalJModuJle(this，state，[]，this._ modules.root) 


// initialize the Store vm，Wwhich is responsible for the reactlivity 
// (also registers _wrappedGetters as computed properties) 
resetStorevM(this，state) 


// applLy plLugins 
plugins,forEach(plugin => plugin(this)) 


If (Vue.config.devtools) 革 
devtoolPlugin(this ) 


我 们 把 store 的 实例 化 过 程 拆 成 3 个 部 分 ， 分 别 是 初始 化 模块 ， 安 装 模 块 和 初始 化 store._vm ， 
接 下 来 我 们 来 分 析 这 3 部 分 的 实现 。 


初始 化 模块 


在 分 析 模 块 初 始 化 之 前 ， 我 们 先 来 了 解 一 下 模块 对 于 Vuex 的 意义 : 由 于 使 用 单一 状态 树 ， 应 用 的 所 有 
状态 会 集中 到 一 个 比较 大 的 对 象 ， 当 应 用 变 得 非常 复杂 时 ， store 对 象 就 有 可 能 变 得 相当 腑 肿 。 为 
了 解决 以 上 问题 ，Vuex 允许 我 们 将 store 分 割 成 模块 (module) 。 每 个 模块 拥有 自己 的 

state 、_ mutation 、 action 、 getter ， 甚 至 是 对 套子 模块 -从 上 至 下 进行 同样 方式 的 分 

割 : 


const moduleA = 
Seaite ES 
mutations: { .,.，》 
actaOns ee 人 二 
gettesso 有 人 二 下 


const moduleB = 攻 
StateE 小 7 
mutations: { .,.，》 
ctaions 汪汪 有 二 
getEees ER 


Const Store = new Vuex.Store({ 
modules: 攻 
a: moduleA， 
b: moduleB 


}) 


store.state.a // -> moduleA 的 状态 
store.state.b // -> moduleB 的 状态 


所 以 从 数据 结构 上 来 看 ， 模 块 的 设计 就 是 一 个 树 型 结构 ， store 本 身 可 以 理解 为 一 个 root 
module ， 它 下 面 的 modules 承 是 子 模 块 ，Vuex 需要 完成 这 颗 树 的 构建 ， 构 建 过 程 的 人 口 束 是 : 


this,_ modules = new ModuJlecollection(options ) 


Modulecollection 的 定义 在 src/module/module-collection.js 中 : 


export default class Modulecollectaon 1 
constructor (rawRootModuJle) 攻 
// register root module (Vuex.Store options ) 
this,register([]，rawRootModule，Talse) 


get (path) 攻 
return path,reduce((module，key) => 攻 


return module,.getCchild(key) 
}，this,root) 


getNamespace (path) 1 
Jet module = this,root 
return path.,reduce((namespace，key) => { 
module = module,getChild(key) 
return namespace + (module,.namespaced ?3 key + /0) 


}， ) 


update (rawRootModule) 革 
update([]，this.root，rawRootModu]le) 


】} 
register (path，rawModule，runtime = true) 攻 
If (process.env.NODE_ENV !== "production' ) 革 
assertRawModule(path，rawModujle ) 
】} 
const newModule = new Module(rawModule，runtime) 
If (path.Length === 0) 攻 
this.root = newModule 
Jelse tf 


const parent = this.get(path.slice(0，-1) ) 
parent .addCchild(path[path.Jlength - 1，newModule) 


// register nested modules 
If (rawModule.modules) 攻 
forEachVvalue(rawModule.modules， (rawchildModule，key) => 攻 
thlis,register(path.concat(key)，rawCchildModule，runtime) 


了]) 


unregister (path) 
const parent = this,get(path,.slice(9，-1I) ) 
const key = path[path.length - 1 工 ] 
If (!parent .getChild(key),.runtime) return 


parent .removeCchild(key) 


Modulecollection 实例 化 的 过 程 就 是 执行 了 _ register 方法 ， register 接收 3 个 参数 ， 其 中 
path 表示 路 径 ， 因 为 我 们 整体 目标 是 要 构建 一 颗 模 块 树 ， path 是 在 构建 树 的 过 程 中 维护 的 路 
径 ; rawModule 表示 定义 模块 的 原始 配置 ; runtime 表示 是 否 是 一 个 运行 时 创建 的 模块 。 


register 方法 首先 通过 const newModule = new Module(rawModule，runtime) 创建 了 一 个 
Module 的 实例 ， Module 是 用 来 描述 单个 模块 的 类 ， 它 的 定义 在 src/module/module.js 中 : 


export default class Modujle 攻 

constructor (rawModule，runtime) 荆 
thizs,.runtime = runtime 
XusStoresomeacndrenaaten 
this,_children = Object,.create(nu]1) 
// Store the origin module object which passed by programmer 
this,_rawModule = rawModu]le 
const rawState = rawModule.Sstate 


2/EStorechneordgmnmoduleuswstate 
this.state = (typeof rawState === 'function' ? rawState() : rawState) || 全 


get namespaced () { 
return !ithis,_rawModule,namespaced 


addCchild (key，module) { 
this,， children[key] = module 


removechild (key) 
delete this,_children[Kkey] 


getChild (key) 攻 


return this,_children[key] 


update (rawModule) 芒 


this._rawModule.namespaced = rawModule,namespaced 


If (rawModule,actions) { 


this._ rawModule.actions = rawModule.actions 


If (rawModuJle ,mutations) 于 


thizs._ rawModule.mutations = rawModule.mutations 


】} 
If (rawModule,getters) { 


this,_rawModule.getters = rawModule.getters 


forEachCchild (fn) 攻 
forEachvalue(this._children，Tfn) 


forEachGetter (fn) 区 
If (this._rawModule.getters) 攻 


forEachValue(this,_rawModule.getters，fn) 


forEachAction (fn) 荆 
If (this,_rawModule.actions) 攻 


forEachValue(this,_rawModule.actions，fn) 


forEachMutation (fn) { 
If (this._rawModule.mutations) 荆 


forEachValue(this,_rawModule.mutations，fn) 


来 看 一 下 Module 的 构造 本 数 ， 对 于 每 个 模块 而 车， 
置 


ths 


._rawModule 表示 模块 的 配 
置 ， this._children 表示 它 的 所 有 子 模块 ， this.state 表示 这 个 模块 定义 的 state 。 


回 到 register ， 那 么 在 实例 化 一 个 _Module 后 ， 判 断 当 前 的 path 的 长 度 如 果 为 0， 则 说 明 它 是 


一 个 根 模块 ， 所 以 把 newModule 赋值 给 了 this.root ， 否 则 束 需 要 建立 父子 关系 了 : 


const parent = this,get(path.slice(0，-1)) 


parent .addchild(path[path.Jength - 1，newModujle) 


我 们 先 大 体 上 了 解 它 的 逻辑 : 首先 根据 路 径 获 取 到 父 模 块 ， 然 后 再 调用 父 模块 的 addchild 方法 建立 
父子 关系 。 

register 的 最 后 一 步 ， 就 是 逗 历 当前 模块 定义 中 的 所 有 modules ， 根 据 key 作为 path ， 递 归 
调用 register 方法 ， 这 样 我 们 再 回 过 头 看 一 下 建立 父子 关系 的 逻辑 ， 首 先 执行 了 
this.get(path.slice(96，-1) 方法 : 


get (path) 攻 
return path.reduce((module，key) => 并 


return module,getCchild(key) 
hsaOOt) 
】} 


传人 的 path 是 它 的 父 模块 的 path ， 然 后 从 根 模块 开始 ， 通 过 reduce 方法 一 层 层 去 找到 对 应 的 
模块 ， 查 找 的 过 程 中 ， 执 行 的 是 module.getchild(key) 方法 : 


getChild (key) 攻 
return this,._children[key] 


其 实 就 是 返回 当前 模块 的 _children 中 对 应 key 的 模块 ， 那 么 每 个 模块 的 __children 是 如 何 添 
加 的 呢 ， 是 通过 执行 parent .addchild(path[path.length - 1]，newModule) 方法 : 


addCchild (key，modulje) 攻 
this, children[key] = module 


} 


所 以 说 对 于 root module 的 下 一 层 modules 来 说 ， 它 们 的 parent 就 是 root module ， 那 么 
他 们 就 会 被 添加 的 root module 的 _children 中 。 每 个 子 模 块 通过 路 径 找到 它 的 父 模 块 ， 然 后 通 
过 父 模 块 的 addchild 方法 建立 父子 关系 ， 递 娄 执 行 这 样 的 过 程 ， 最 终 就 建立 一 颗 完 整 的 模块 树 。 
安装 模块 


初始 化 模块 后 ， 执 行 安装 模块 的 相关 逻辑 ， 它 的 目标 就 是 对 模块 中 的 
state 、 getters 、 mutations 、 actions 做 初始 化 工作 ， 它 的 入 口 代 码 是 : 


const State = thlis. modules.root.state 
InstalJModuJle(this，state，[]，this, modules.root) 


来 看 一 下 _ installModule 的 定义 : 


function installModule (Store，rootState，path，module，hot) 攻 
const IsSRoot = !path.length 
const namespace = store._modules.getNamespace(path ) 


// register in namespace map 


If (module.namespaced) { 
store._modulesNamespaceMap[namespace] = module 


IESeEEsEate 
If (!iSRoot && !hot) 攻 


const parentState = getNestedState(rootState，path.slice(09，-I) ) 


const moduleName = path[path.Jlength - 了 | 
Store._wWithCommit(() => 攻 
Vue.set(parentState，moduleName，modulje.state) 


了]) 


const local = module.context = makeLocalContext(Store， 


module,.forEachMutation((mutation，Kkey) => 
const namespacedType = namespace + key 


namespace，path ) 


registerMutation(store，namespacedType，mutation，1ocal) 


]) 


module,forEachAction((action，Kkey) => 
const type = action.root ? key : namespace + key 
const handler = action.handler || action 
registerAction(store，type，handler，]1ocal) 


}) 


module,forEachGetter((getter，key) => { 
const namespacedType = namespace + key 


registerGetter(Sstore，namespacedType，getter，1]1ocal) 


}) 


modulje,.forEachchild((child，Kkey) => 


Instal]lModule(store，rootState，path.concat(key)，child，hot) 


}) 


installModule 方法 支持 5 个 参数 ， store 表示 root store 
state ; path 表示 模块 的 访问 路 径 ; module 表示 当前 的 模块 ， 


》 


state 表示 root 
hot 表示 是 否 是 热 更 新 。 


接 下 来 看 函数 逻辑 ， 这 里 涉及 到 了 命名 空间 的 概念 ， 默 认 情 况 下 ， 模 块 内 部 的 action 、 mutation 


其 成 为 带 命名 空间 的 模块 。 当 模块 被 注册 后 ， 它 的 所 有 getter 、 
根据 模块 注册 的 路 径 调整 命名 。 例 如 : 


Const Store = new Vuex.Store({ 
modules: 攻 
account : 荆 
namespaced: truey 


和 getter 是 注册 在 全 局 命名 空间 的 一 一 这 样 使 得 多 个 模块 能 够 对 同一 mutation 或 action 作 
出 响应 。 如 果 我 们 希望 模块 具有 更 高 的 封装 度 和 复 用 性 ， 可 以 通过 添加 namespaced: true 的 方式 使 


action 及 mutation 都 会 自动 


// 模块 内 容 (module assets) 


state: { ..，}，// 模块 内 的 状态 已 经 是 俯 套 的 了 ， 使 用 “namespaced 
getters: 革 
ISAdmin () 1 ..， }// -> getters[' account/isAdmin '] 
] 
actions: 攻 
LOgqan 古 (全 下 [RN ESsDatch 人 accoun 包 oogunig 
】 
mutations: { 
login () 由 .…， }// -> commit('account/login' ) 
] 


// 藤 套 模块 
modujles: 攻 
// 继承 父 模块 的 命名 空间 
myPage: 革 
State: 人 二 二 关 仆 7 
getters: 


profale() 呈 USECOE> OOetterslaccount profale 


posts: 1{ 
namespaced: truey， 


上 


条 


日 性 不 会 对 其 产生 影响 


SEE 人 人 
getters: 并 
popular () 1 .,,,， }// -> getters['account/Vposts/Vpopular '] 
} 
} 
} 
} 
} 
]) 


回 到 instalLllModule 方法 ， 我 们 首先 根据 path 获取 namespace 


const namespace = store,_ modules.getNamespace(path) 


getNamespace 的 定义 在 src/module/module-collection.js 中 : 


getNamespace (path) { 
Jet module = this.root 
return path.reduce((namespace，key) => 并 
module = module,getChild(key) 
return namespace + (module.namespaced ?3 key +  / 


JJ 


0 


从 root module 开始 ， 通 过 reduce 方法 一 层 层 找 子 模块 ， 如 果 发 现 该 模块 配置 了 namespaced 
为 true， 则 把 该 模块 的 key 拼 到 namesapce 中 ， 最 终 返 回 完 整 的 namespace 字符 串 。 


回 到 :installModule 方法 ， 接 下 来 把 namespace 对 应 的 模块 保存 下 来 ， 为 了 方便 以 后 能 根据 
namespace 查找 模块 : 


If (module.namespaced) 并 
store._modulesNamespaceMap [namespace] = module 


接 下 来 判断 非 root module 且 非 hot 的 情况 执行 一 些 逻 辑 ， 我 们 稍 后 再 看 。 
接着 是 很 重要 的 逻辑 ， 构 造 了 一 个 本 地 上 下 文 环境 : 


const Jocal = modulje,context = makeLocalContext(store，namespace，path ) 


来 看 一 下 _makeLocalcontext 实现 : 


function makeLocalCcontext (Store，namespace，path) 革 
const noNamespace = namespace === 


const Jocal = 革 
dispatch: noNamespace ? store,.dispatch : (_type，_payload，_options) => { 
const args = unifyobjectStyle(_type，_payload，_options ) 
const { payload，options } = args 
let { type } = args 


If (!options || !options.root) { 
type = namespace + type 
If (process.env.NODE_ENV !== ' production'” && !store._actions[type]) 攻 
console,error( ` [vuex] unknown local action type: ${fargs,type}+，global typ 
e: $ttype} ) 
IEeEUn 


return store.dispatch(type，pay1oad ) 
}， 


Commit: noNamespace ? Store.commit : (_type，_payload，_options) => 攻 
const args = unifyobjectStyle(_type，_payload，_options ) 
const { payload，options } = args 
let { type = args 


If (!options || !options.root) { 
type = namespace + type 


If (process.env.NODE_ENV !== :production'”&& !store._mutations[type]) 攻 
console,error( [vuex] unknown local mutation type: $fargs.type}，g1lobal t 
ype: $ttype} ) 
return 


Store.commit(type，payload，options ) 


// getters and state object must be gotten 1Lazily 
// because they will be changed by vm update 
0bject .defineProperties(1ocal， 攻 
getters: 于 
get: noNamespace 
? () => store.getters 
() => makeLocalGetters(Sstore，namespace) 


}， 
State: 

get: () => getNestedState(store,.state，path) 
】} 


}) 


return 1ocal 


makeLocalCcontext 支持 3 个 参数 相关 ， store 表示 root store ; namespace 表示 模块 的 命 
空间 ， path 表示 模块 的 path 。 


该 方法 定义 了 local 对 象 ， 对 于 dispatch 和 commit 方法 ， 如 果 没 有 namespace ， 它 们 就 直 
接 指 向 了 _ root store 的 dispatch 和 commit 方法 ， 否 则 会 创建 方法 ， 把 type 上 自动 拼接 上 
namespace ， 然 后 执行 store 上 对 应 的 方法 。 


对 于 getters 而 言 ， 如 果 没 有 namespace ， 则 直接 返回 root store 的 getters ， 否 则 返回 
makeLocalGetters(Sstore，namespace) 的 返回 值 : 


function makeLocalGetters (Store，namespace) 
const gettersProxy = 1{} 


const SpJlitPos = namespace,.Jength 
0bject,keys(Sstore.getters).forEach(type => 攻 
// Skip if the target getter is not match this namespace 
if (type,S1lice(9，SplitPos) !== namespace) return 


// extract local getter type 
const localType = type.Slice(SplLitPos ) 


// Add a port to the getters proxy. 
// Define as getter property because 


// we do not want to evaluate the getters in this time . 
0bject .defineProperty(gettersProxy，1LocalType， 攻 
get: () => store,.getters[type]， 
enumerab1le: true 
殉 ) 
】) 


return getterSsProxy 


makeLocalGetters 首先 获取 了 namespace 的 长 度 ， 然 后 逗 历 root store 下 的 所 有 

getters ， 先 判 断 它 的 类 型 是 否 匹 配 namespace ， 只 有 匹配 的 时 候 我 们 从 namespace 的 位 置 截取 
后 面 的 字符 串 得 到 localType ， 接 着 用 object.defineProperty 定义 了 gettersProxy ， 获 取 
localType 实际 上 是 访问 了 _ store,getters[type] 。 


回 到 makeLocalcontext 方法， 再 来 看 一 下 对 state 的 实现 ， 它 的 获取 则 是 通过 
getNestedState(store.state，path) 方法 : 


funcciongdetNestedsSstatei(stateaipathn) 下 
return path, ength 
? path.reduce((Sstate，key) => State[key]，state) 
: State 


getNestedSstate 逻辑 很 简单 ， 从 root state 开始 ， 通 过 path.reduce 方法 一 层 层 查找 子 模块 
state ， 最 终 找 到 目标 模块 的 state 。 


那么 构造 完 local 上 下 文 后 ， 我 们 再 回 到 installModule 方法 ， 接 下 来 它 就 会 逼 历 模块 中 定义 的 
mutations 、 actions 、 getters ， 分 别 执行 它们 的 注册 工作 ， 它们 的 注册 逻辑 都 大 同 小 异 。 


ee registerMutation 


modulje.forEachMutation((mutation，Kkey) => 1{ 
const namespacedType = namespace + key 
registerMutation(store，namespacedType，mutation，1ocal) 


}) 


function registerMutationm (store，type，handler，1local) 攻 
const entry = Store._mutations[type] || (store,_mutations[type] = []) 
entry,.push(function wrappedMutationHandler (payload) 攻 
handler.call(store，J1ocal,state，pay1oad ) 


}) 


首先 台历 模块 中 的 mutations 的 定义 ， 拿 到 每 一 个 _ mutation 和 key ， 并 把 key 拼接 上 
namespace ， 然 后 执行 registerMutation 方法 。 该 方法 实际 上 就 是 给 root store 上 的 


_mutations[types] 添加 wrappedMutationHandler 方法 ， 该 方法 的 具体 实现 我 们 之 后 会 提 到 。 
注意 ， 同 一 type 的 _mutations 可 以 对 应 多 个 方法 。 


e registerAction 


modulje.forEachAction((action，key) => 
const type = action.root ? key : namespace + key 
const handler = action,handler || action 
registerAction(store，type，handler，J1ocal) 


}) 


function registerAction (store， type，handler，1ocal) 1 
const entry = store._actions[type] || (store,_actions[type] = []) 
entry,.push(function wrappedActionHandler (payload，cb) 攻 

let res = handler.call(store， 并 
dispatch: local.dispatch， 
Commit: 1ocal .commit， 
getters: 1Local.getters， 
State: local,.Sstate， 
rootGetters: store.getters， 
rootState: Store.Sstate 

}，pay1load， cb ) 

If (!isPromise(res)) 
res = Promise.resolve(res) 

】} 

If (Store._ devtoolHook) 并 
return res.catch(err => { 

store._devtoolHook .emit('VvVuex:error'，err) 


throw err 
]) 
TelseaT 
return res 
} 
】) 


首先 瑰 历 模块 中 的 actions 的 定义 ， 拿 到 每 一 个 action 和 key ， 并 判断 action.root ， 如 果 
否 的 情况 把 key 拼接 上 namespace ， 然 后 执行 registerAction 方法 。 该 方法 实际 上 就 是 给 
root store 上 的 _actions[types] 添加 wrappedActionHandler 方法 ， 该 方法 的 具体 实现 我 们 
之 后 会 提 到 。 注 意 ， 同 一 type 的 _actions 可 以 对 应 多 个 方法 。 


e registerGetter 


modulje.forEachGetter((getter，key) => 
const namespacedType = namespace + key 
registerGetter(store，namespacedType，getter，]1ocal) 


]) 


function registerGetter (store type， rawGetter，1ocal) 攻 
If (Store._wrappedGetters[type]) 革 
If (process,.env.NODE_ENV !== "production' ) 革 


console.error( [vuex] duplicate getter key: ${ftype} ) 
】} 


return 


】} 
store._ wrappedGetters[type] = function wrappedGetter (Store) 六 
return rawGetter( 
local.state，// 1ocal state 
Local,getters，7// local getters 
Store.Sstate，// root state 
Store.getters // root getters 


首先 驶 历 模 块 中 的 getters 的 定义 ， 拿 到 每 一 个 getter 和 key ， 并 把 key 拼接 上 
namespace ， 然后 执行 registerGetter 方法 。 该 方法 实际 上 就 是 给 root store 上 的 
_wrappedGetters[key] 指定 wrappedGetter 方法 ， 该 方法 的 具体 实现 我 们 之 后 会 提 到 。 注意 ， 同 

一 type 的 _wrappedGetters 只 能 定义 一 个 。 


再 回 到 installModule 方法 ， 最 后 一 步 就 是 喜 历 模块 中 的 所 有 子 _modules ， 递 娄 执 行 
installModule 方法 : 


module,forEachchild((child，key) => 攻 
InstalJModuJle(store，rootState，path.concat(key)，child，hot) 


}) 


之 前 我 们 忽略 了 非 root module 下 的 state 初始 化 逻辑 ， 现 在 来 看 一 下 : 


If (!iISRoot && !hot) { 
const parentState = getNestedState(rootState，path.slice(90，-1)) 
const moduleName = path[path.Jength - 了 ] 
Store._wWithCommit(() => 
Vue.set(parentState，moduleName，module.state) 


}) 


之 前 我 们 提 到 过 getNestedstate 方法 ， 它 是 从 _ root state 开始 ， 一 层 层 根据 模块 名 能 访问 到 对 
应 path 的 state ， 那 么 它 每 一 层 关 系 的 建立 实际 上 就 是 通过 这 段 state 的 初始 化 逻 
辑 。 store. withcommit 方法 我 们 之 后 再 介绍 。 


所 以 installModule 实际 上 束 是 完成 了 模块 下 的 state 、 getters 、 actions 、 _ mutations 
的 初始 化 工作 ， 并 且 通 过 递归 表 历 的 方式 ， 就 完成 了 所 有 子 模块 的 安 半 工作 。 


人 科 始 化 Store .， Vm 
store 实例 化 的 最 后 一 步 ， 就 是 执行 初始 化 _ store._vm 的 逻辑 ， 它 的 人 口 代码 是 : 


resetStorevM(this，state) 


来 看 一 下 _resetstorevM 的 定义 : 


functionresetsSstorevM (Store state hot) 
const 01dvm = Store.,_Vvm 


// bind store pub1lic getters 
Store.getters = 1{} 
const wrappedGetters = store._wrappedGetters 
const computed = {} 
forEachValue(wrappedGetters，(fn，Kkey) => 
// Use computed to leverage Its 1Lazy-caching mechanism 
computed[key] = () => fn(store) 
0bject.defineProperty(store.getters，Kkey， 并 
get: () => store,_vm[key]， 
enumerab1le: true // for local getters 
}) 
间 ) 


帮 重 UseaaVuernsktanmceoEskoceathe estateakEnes 
// Suppress warnings just in case the user has added 
// Some funky glLobal mixins 
const Silent = Vue.config.silent 
Vue.config.silent = true 
Store._vm = new Vue({ 

data: 荆 

$$state: State 
】 
computed 


}) 


Vue.config.sSilent = Silent 


// enabjle strict mode for new Vvm 
If (Store.strict) 攻 
enabJleStrictMode(Store) 


If (oldvm) 攻 
If (hot) { 
// dispatch changes in all subscribed watchers 
// to force getter re-evaluation for hot reloading ， 
Store.,_ withCommit(() => 攻 
01dvm.,_data.$$state = nul1l 
]) 


】} 
Vue.nextTick(() => 01dvm.$destroy()) 


resetStorevM 的 作用 实际 上 是 想 建 立 getters 和 state 的 联系 ， 因 为 从 设计 上 getters 的 获 
取 就 依赖 了 _ state ， 并 且 布 望 它 的 依赖 能 被 缓存 起 来 ， 且 只 有 当 它 的 依赖 值 发 生 了 改变 地 会 被 重新 
计算 。 因 此 这 里 利用 了 Vue 中 用 computed 计算 属性 来 实现 。 


resetStorevM 首先 逗 历 了 _wrappedGetters 获得 每 个 getter 的 函数 fn 和 key ， 然 后 定义 
了 computed[key] = () => fn(store) 。 我 们 之 前 提 到 过 _wrappedGetters 的 初始 化 过 程 ， 这 里 
fn(store) 相当 于 执行 如 下 方法 : 


store._wrappedGetters[type] = function wrappedGetter (Store) 蕊 
return rawGetter( 
Jocal,.state，// local State 
Local.getters，// local getters 
Store.state，// root state 
Store.getters // root getters 


返回 的 就 是 _rawGetter 的 执行 本 数 ， rawGetter 就 是 用 户 定义 的 getter 本 数 ， 它 的 前 2 个 参数 
是 local state 和 1local getters ， 后 2 个 参数 是 root state 和 root getters 。 


接着 实例 化 一 个 Vue 实例 store._vm ， 并 把 computed 传人 : 


Store._vm = new Vue({f 
data: 攻 
$$state: State 


】 


Computed 


}) 


我 们 发 现 data 选项 里 定义 了 $$state 属性 ， 而 我 们 访问 store.state 的 时 候 ， 实 际 上 会 访问 
Store 类 上 定义 的 state 的 get 方法 : 


get State () 革 


return this._ vm,， data.$$state 


它 实 际 上 就 访问 了 store._ vm_data.$$state 。 那 么 getters 和 state 是 如 何 建立 依赖 逻辑 的 
呢 ， 我 们 再 看 这 段 代 人 码 逻 辑 : 


forEachVvalue(wrappedGetters，(fn，Kkey) => 
// use computed to leverage Its 1Lazy-caching mechanism 
computed[key] = () => fn(store) 
0bject.defineProperty(store.getters，key，1 
get: () => store,_vm[key]， 
enumerable: true // for local getters 
押 
】) 


当 我 根据 key 访问 store.getters 的 某 一 个 getter 的 时 候 ， 实际 上 就 是 访问 了 

store,_ vm[key] ， 也 就 是 computed[key] ， 在 执行 computed[key] 对 应 的 函数 的 时 候 ， 会 执行 
rawGetter(1ocal.state,，.,，,) 方法 ， 那么 就 会 访问 到 store.state 上 进而 访问 到 
store._vm_data.$$state ， 这 样 就 建立 了 一 个 依赖 关系 。 当 store.state 发 生变 化 的 时 候 ， 下 一 
次 再 访问 _ store.getters 的 时 候 会 重新 计算 。 


我 们 再 来 看 一 下 strict mode 的 逻辑 : 


If (Store.strict) 
enabJeStrictMode(store) 


让 UnctlionaenapblesStractMoue(kCsEOre) 大 攻 
store._vm.$watch(function () { return this,， data.$$state }，() => 革 
If (process.env.NODE_ENV !== "production' ) 革 
assert(Sstore._committing， Do not mutate Vuex Store state outside mutation ha 


ndlers，) 


】} 
刀 {deep: true，sync: true }) 


当 严 格 模式 下 ， store._vm 会 添加 一 个 _wathcer 来 观测 this._ data.$$state 的 变化 ， 也 就 是 当 
Store.state 被 修改 的 时 候 ， Store,_committing 必须 为 true， 否则 在 开发 阶段 会 报警 

告 。 store._committing 默认 值 是 false ， 那 么 它 什么 时 候 会 tue 呢 ， store 定义 了 
_withCcommit 实例 方法 : 


_wWithCommit (fn) 1 
const committing = this.,_committing 
this,_committing = true 
fn() 
this,_committing = Committing 


它 就 是 对 fn 包装 了 一 个 环境 ， 确 保 在 fn 中 执行 任何 逻辑 的 时 候 this._committing = true 。 
所 以 外 部 任何 非 通过 Vuex 提供 的 接口 直接 操作 修改 state 的 行为 都 会 在 开发 阶段 触发 警告 。 
那么 至 此 ，Vuex 的 初始 化 过 程 就 分 析 完 毕 了 ， 除 了 安装 部 分 ， 我 们 直播 重点 分 机 了 _ Store 的 实例 化 
过 程 。 我 们 要 把 store 想象 成 一 个 数据 仓库 ， 为 了 更 方便 的 管理 仓库 ， 我 们 把 一 个 大 的 store 拆 
成 一 些 modules ， 整 个 modules 是 一 个 树 型 结构 。 每 个 module 又 分 别 定 义 了 

state ， getters ， mutations 、 actions ， 我 们 也 通过 递 妇 表 历 模块 的 方式 都 完成 了 它们 的 初 
始 化 。 为 了 module 具有 更 高 的 封装 度 和 复 用 性 ， 还 定义 了 _namespace 的 概念 。 最 后 我 们 还 定义 了 
一 个 内 部 的 vue 实例 ， 用 来 建立 state 到 getters 的 联系 ， 并 且 可 以 在 严格 模式 下 监测 

state 的 变化 是 不 是 来 自 外 部 ， 确 保 改变 state 的 唯一 途径 就 是 显 式 地 提交 mutation 。 


这 一 区 我 们 已 经 建立 好 store ， 接 下 来 就 是 对 外 提供 了 一 些 API 方便 我 们 对 这 个 store 做 数据 存 
取 的 操作 ， 下 一 节 我 们 就 来 从 源码 角度 来 分 析 vuex 提供 的 一 系列 API。 


API 


上 一 区 我 们 对 Vuex 的 初始 化 过 程 有 了 深入 的 分 析 ， 在 我 们 构造 好 这 个 _ store 后 ， 需 要 提供 一 些 API 
对 这 个 store 做 存 取 的 操作 ， 那 么 这 一 他 我 们 就 从 产 码 的 角度 对 这 些 API 做 分 析 。 


数据 获取 


Vuex 最 终 存储 的 数据 是 在 state 上 的 ， 我 们 之 前 分 析 过 在 store.state 存储 的 是 root 
State ， 那么 对 于 模块 上 的 state 假设 我 们 有 2 个 肯 套 的 modules 加 它们 的 key 分 别 为 a 
和 b ， 我 们 可 以 通过 store.state.a.b,.xxx 的 方式 去 获取 。 它 的 实现 是 在 发 生 在 
installModule 的 时 候 : 


functionm InstallModule (store rootsState， path module hot) 萎 
const 1ISRoot = !path,length 


OA 
/SetEESEate 
If (!iSRoot && !hot) 攻 
const parentState = getNestedState(rootState，path.slice(0，-I) ) 
const moduleName = path[path,.Jlength - 工 ] 
Store._withCommit(() => 并 
Vue.set(parentState，moduleName，modulje.state) 


了 ) 


在 递 娄 执行 installModule 的 过 程 中 ， 就 完成 了 整个 state 的 建设 ， 这 样 我 们 就 可 以 通过 
module 名 的 path 去 访问 到 一 个 深层 module 的 state 。 


有 些 时候 ， 我 们 获取 的 数据 不 仅仅 是 一 个 _ state ， 而 是 由 多 个 state 计算 而 来 ，Vuex 提供 了 
getters ， 人 允许 我 们 定义 一 个 getter 本 数 ， 如 下 : 


getters: 区 
total (State，getters，]1ocalState，]1ocalGetters) 攻 
// 可 访问 全 局 state 和 getters， 以 及 如 果 是 在 modules 下 面 ， 可 以 访 | 名 state 和 局 部 
OUetEEers 


return State.a + State.b 


我 们 在 instaLllModule 的 过 程 中 ， 递 娄 执 行 了 所 有 getters 定义 的 注册 ， 在 之 后 的 
resetStorevM 过 程 中 ， 执 行 了 _ store.getters 的 初始 化 工作 : 


function installModule (Store，rootState，path，module，hot) 区 
区 
const namespace = store._modules.getNamespace(path ) 
LA 
const Jocal = modulje.context = makeLocalContext(Sstore，namespace， 


2 
module.forEachGetter((getter，Kkey) => { 


const namespacedType = namespace + key 
registerGetter(store，namespacedType，getter，1]1ocal) 


]) 
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function registerGetter (store，type，rawGetter，1ocal) 攻 
If (store,._wrappedGetters[type]) { 


If (process,.env,.NODE_ENV !== "production') 六 
Corisoleserrorgi lvuexjuduplmncategettermkKey :ES$EyDpe 

】} 

| 区 si 本 | 


J 


store,._ wrappedGetters[type] = function wrappedGetter (Store) 六 
return rawGetter( 
Jocal,state，// 1local State 
Jocal,getters，// local getters 
Store.state，// root State 
store.getters // root getters 


EUnCtETonaesektstolieVvMESEorenstateaanot) 是 人 
人 
// bind store pub1lic getters 
Store.getters = 1{} 
const wrappedGetters = store._ wrappedGetters 
const computed = {} 
forEachValue(wrappedGetters，(fn，Kkey) => { 
// use computed to leverage Its 1Lazy-caching mechanism 
computed[key] = () => fn(store) 
0bject .defineProperty(store.getters，key， 并 
get: () => store,._vm[key],， 
enumerable: true // for local getters 
了]) 
了]) 


// use a Vue instance to store the State tree 


path ) 


// Suppress warnings just in case the user has added 
// Some funky glLobal mixins 


0 
Store._vm = new Vue({ 
data: 荆 
$$state: State 
] 
Computed 
】) 
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在 installModule 的 过 程 中 ， 为 建立 了 每 个 模块 的 上 下 文 环 境 ， 因此 当 我 们 访问 
store.getters.xxx 的 时 候 ， 实 际 上 就 是 执行 了 rawGetter(l1ocal.state, ...) ， rawGetter 就 
是 我 们 定义 的 getter 方法 ， 这 也 就 是 为 什么 我 们 的 getter 酚 数 支持 这 四 个 参数 ， 并 且 除 了 全 局 
的 state 和 getter 外 ， 我 们 还 可 以 访问 到 当前 module 下 的 state 和 getter 。 


数据 存储 


Vuex 对 数据 存储 的 存储 本 质 上 就 是 对 state 做 修改 ， 并 且 只 人 允许 我 们 通过 提交 mutaion 的 形式 去 
修改 state ， mutation 是 一 个 画 数 ， 如 下 : 


mutations: 攻 
Increment (State) 于 
State.COUnt++ 


mutations 的 初始 化 也 是 在 installModule 的 时 候 : 


functionnstallModquuLen(storen rootstatea pathnamodulen not) 下 《 
疙 
const namespace = store._modules.getNamespace(path ) 


2 
const local = module.context = makeLocalContext(store，namespace，path ) 


module,.forEachMutation((mutation，Kkey) => 并 
const namespacedType = namespace + key 
registerMutation(store，namespacedType，mutation，1ocal) 


】) 
记 


function registerMutatIion (store type” handler，local) 记 
const entry = store._mutations[type] || (store._mutations[type] = []) 
entry,.push(function wrappedMutationHandler (payload) 攻 
handler.call(store，J1ocal,.state，pay1oad ) 


}) 


store 提供 了 commit 方法 让 我 们 提交 一 个 _mutation 


commit (_type，_payload，_options) 并 
// check object-style commit 
const { 
type， 
pay1Load ， 
options 
} = unifyobjectStyle(_type，_payload，_options ) 


const mutation = { type，payload } 
const entry = this,_ mutations[type] 
if (!entry) 攻 


If (process.env.NODE_ENV !== "production' ) 
console,error( [vuex] unknown mutation type: ${ttype} ) 

】} 

return 


】} 
this, withCommit(() => 革 
entry,.forEach(function commitIterator (handler) 攻 


handler(pay1load ) 
了]) 
了]) 
this, Subscribers.forEach(Sub => Sub(mutation，this,.state)) 
二 全 (人 
process.env.NODE_ENV !== production'” && 
options && options.Silent 
) 
ConSole.warn( 
UVUexlimutatuonatype 到 StypenrsSsauentaopbtronunas 旭 peenaremoved 十 
JUSe 蕊 ne 下体 可 Eee UnmctronalatyengthensvVvuesdev 起 00s， 
) 
】} 


这 里 传人 的 _type 就 是 _ mutation 的 type ， 我 们 可 以 从 store._mutations 找到 对 应 的 函数 数 
组 ， 带 历 它 们 执行 获取 到 每 个 handler 然后 执行 ， 实 际 上 天 是 执行 了 
hwrappedMutationHandler(playload) ， 接 着 会 执行 我 们 定义 的 mutation 画 数 ， 并 传人 当前 模块 
的 state ， 所 以 我 们 的 mutation 画 数 也 就 是 对 当前 模块 的 state 做 修改 。 


需要 注意 的 是 ， _ mutation 必须 是 同步 本 数 ， 但 是 我 们 在 开发 实际 项 目 中 ， 经 常会 遇 到 要 先 去 发 送 一 
个 请 求 ， 然 后 根据 请 求 的 结果 去 修改 state ， 那 么 单纯 只 通过 mutation 是 无 法 完成 需求 ， 因 此 
Vuex 又 给 我 们 设计 了 一 个 action 的 概念 。 


action 类 似 于 mutation ， 不 同 在 于 action 提交 的 是 _ mutation ， 而 不 是 直接 操作 state ， 
并 且 它 可 以 包含 任意 异步 操作 。 例 如 : 


mutations: 攻 
Increment (State) 于 
State.COUnt++ 
】} 
} 
actions: 并 
Increment (context) 1 
SetTimeout(() => 并 
context .commit( 'increment ' ) 


}，09) 


actions 的 初始 化 也 是 在 installModule 的 时 候 : 


function InstallModule (Store，TrootState， path，module，hot) 攻 
2 


const namespace = store,._modules.getNamespace(path ) 


光 6 


const local = module.context = makeLocalContext(store，namespace，path ) 


module,.forEachAction((action，Kkey) => { 
const type = action.root ? key : namespace + key 
const handler = action,handler || action 
registerAction(store，type，handler，]1ocal) 


让 
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function registerAction (store，type， handler，1ocal) 萎 
const entry = Store._actions[type] || (store,_actions[type] = []) 
entry,.push(function wrappedActionHandler (payload，cb) 攻 

Jet res = handler.call(store，T{ 
dispatch: local.dispatch， 
Commit: 1ocal .commit， 
getters: 1Local.getters， 
State: local,.Sstate， 
rootGetters: store.getters， 
rootState: Store.Sstate 

}，pay1load， cb ) 

If (!isPromise(res)) 
res = Promise.resolve(res) 

】} 

If (store._ devtoolIHook) 并 
return res.catch(err => { 


store._devtoolHook .emit('VvVuex:error'，err) 


throw err 
]) 
else ({ 
return res 
】} 
}) 
】} 


store 提供 了 dispatch 方法 让 我 们 提交 一 个 action 


dispatch (_type，_payload) { 
// check object-style dispatch 
Const 1{ 
type， 
pay1Load 
} = unifyobjectStyJle(_type，_pay]load ) 


const action = { type，payload } 
const entry = this,_actions[type] 
If (!entry) 六 


If (process.env.NODE_ENV !== "production') 革 
console.error( [vuex] unknown action type: ${fttype} ) 

】} 

return 


this,_actionSubscribers .forEach(Ssub => Sub(action，this.state)) 


return entry,Jength > 工 
? Promise.all(entry,.map(handler => handler(payload ) ) ) 
: entry[9](pay1Lload ) 


这 里 传人 的 _type 就 是 action 的 type ， 我 们 可 以 从 store, actions 找到 对 应 的 酚 数 数 

组 ， 逼 历 它 们 执行 获取 到 每 个 handler 然后 执行 ， 实 际 上 束 是 执行 了 
wrappedActionHandler(payload) ， 接 着 会 执行 我 们 定义 的 action 画 数 ， 并 传人 一 个 对 象 ， 包 含 
了 当前 模块 下 的 dispatch 、 commit 、 getters 、 state ， 以 及 全 局 的 rootstate 和 
rootGetters ， 所 以 我 们 定义 的 action 画 数 能 拿 到 当前 模块 下 的 commit 方法 。 


因此 action 比 我 们 自己 写 一 个 函数 执行 异步 操作 然后 提交 muataion 的 好 处 是 在 于 它 可 以 在 参数 
中 获取 到 当前 模块 的 一 些 方法 和 状态 ，Vuex 帮 有 我 们 做 好 了 这 些 。 


语法 糖 
我 们 知道 store 是 store 对 象 的 一 个 实例 ， 它 是 一 个 原生 的 Javascript 对 象 ， 我 们 可 以 在 任意 地 方 


使 用 它们 。 但 大 部 分 的 使 用 场景 还 是 在 组 件 中 使 用 ， 那 么 我 们 之 前 介绍 过 ， 在 Vuex 安装 阶段 ， 筷 会 往 
每 一 个 组 件 实例 上 混入 befeforecreated 钩子 本 数 ， 然后 往 组 件 实例 上 添加 一 个 $store 的 实 


例 ， 它 指向 的 就 是 我 们 实例 化 的 store ， 因 此 我 们 可 以 在 组 件 中 访问 到 store 的 任何 属性 和 方 
法 。 
比如 我 们 在 组 件 中 访问 state 


const Counter = 
tempJlate: “<div>{{t count }}</div> ， 
Computed : 
count () 荆 
return this,.$store,state,count 


但 是 当 一 个 组 件 需要 获取 多 个 状态 时 候 ， 将 这 些 状态 都 声明 为 计算 属性 会 有 些 重复 和 宛 余 。 同 样 这 些 
问题 也 在 存 于 getter 、_ mutation 和 action 。 


为 了 解决 这 个 问题 ，Vuex 提供 了 一 系列 mapxxx 辅助 函数 帮助 我 们 实现 在 组 件 中 可 以 很 方便 的 注入 
store 的 属性 和 方法 。 


mapState 


我 们 先 来 看 一 下 _mapstate 的 用 法 : 


// 在 单独 构建 的 版 本 中 辅助 本 数 为 Vuex ,mapState 


Import { mapState } from 'Vuex' 


export default 1{ 
/5 
Computed: mapState({ 
// 箭头 函数 可 使 代码 更 简练 
count : State => State.count， 


// 传 字 符 串 参数 'count ' 等 同 于 `state => state.count 
countA]ias: "count '， 


// 为 了 能 够 使 用 “this ”获取 局 部 状态 ， 必 须 使 用 常规 函数 
CountPJusLocalState (State) { 
return State.count + thlis.1ocalCcount 


]) 


再 来 看 一 下 _mapstate 方法 的 定义 ， 在 src/helpers.js 中 : 


export const mapState = normalizeNamespace((namespace，Sstates) => 区 
Conistice s 王 三 旺 诸 
normalizeMap(Sstates).forEach(({ key，Vval }) => 攻 


res[key] = function mappedState () 
let state = this,.$store,state 
let getters 


this.$store,getters 
If (namespace) 区 


const module 
if (!module) 并 
return 


】} 


state = module.context.state 


getModuleByNamespace(t 


getters = modulje.context.getters 


} 
return typeof val === 'function' 
? val,call(this，Sstate，getters) 
: State[val] 
】} 
// mark Vvuex getter for devtools 
res[key].vuex = true 
】) 
return res 
】) 


function normaliIzeNamespace (fn) 攻 
return (namespace，map) => 
if (typeof namespace !== "string' ) 六 
map = namespace 
namespace = 


} else If (namespace,charAt(namespace.1length - 工 ) 


namespace +=  /， 


return fn(namespace，map) 


function normalizeMap (map) 苹 
return Array, IsArray(map) 
? map.map(key => ({ key，Vval: key })) 
: 0bject.keys(map),map(key => ({ key，YVval 


首先 mapSstate 是 通过 执行 normaLizeNamespace 返 
namespace 表示 命名 空间 ， map ”表示 具体 的 对 象 ， 
namespace 的 作用 。 


当 执行 mapSstate(map) 本 数 的 时 候 ， 实 际 上 就 是 执行 
map 作为 参数 states 传人 。 


mapState 最 终 是 要 构造 一 个 对 象 ， 每 个 对 象 的 元 素 都 


his.$store， 'mapState'，namespace) 


[之 三 2 人 


: map[key] })) 


回 的 函数 ， 它 接收 2 个 参数 ， 其 中 


namesSpace 可 不 传 ， 稍 后 我 们 来 介绍 


normaliIzeNamespace 包 庄 的 函数 ， 然后 把 


是 一 个 方法 ， 因 为 这 个 对 象 是 要 扩展 到 组 件 的 


computed 计算 属性 中 的 。 酚 数 首先 执行 normalizeMap 方法 ， 把 这 个 _ states 变 成 一 个 数组 ， 数 
组 的 每 个 元 素 都 是 {key，val} 的 形式 。 接 着 再 通 历 这 个 数组 ， 以 key 作为 对 象 的 key ， 值 为 一 


个 mappedSstate 的 函 数 ， 在 这 个 函数 的 内 部 ， 获 取 到 $store.getters 和 $store.state ， 人 然后 
再 判断 数组 的 val 如 果 是 一 个 函数 ， 执 行 该 画 数 ， 传 人 state 和 getters ， 否 则 直接 访问 
State[val] 。 


比 起 一 个 个 手动 声明 计算 属性 ， mapstate 确实 要 方便 许多 ， 下 面 我 们 来 看 一 下 _namespace 的 作 
用 。 


当 我 们 想 访 问 一 个 子 模块 的 state 的 时 候 ， 我 们 可 能 需要 这 样 访问 : 


computed : 荆 
mapState({ 
a: State => State.Some.nested,module.a， 
b: state => State,Some,nested.module,b 
】) 
}， 


这 样 从 写法 上 就 很 不 友好 ， mapSstate 支持 传人 _ namespace ， 因此 我 们 可 以 这 么 写 : 


computed : 攻 
mapState( ' Some/vnested/module'， 攻 
a: State => State.a， 
b: State => State.b 
了]) 
}， 


这 样 看 起 来 束 清 碍 许多 。 在 mapState 的 实现 中 ， 如 果 有 namespace ， 则 尝试 去 通过 
getModuleByNamespace(this.$store，'mapState'，namespace) 对 应 的 module ， 然 后 把 
state 和 getters 修改 为 module 对 应 的 state 和 getters 。 


function getModuleByNamespace (Store，helper，namespace) 攻 
const module = store._modulesNamespaceMap [namespace] 
If (process.env.NODE_ENV !== "production”&& !module) 
conSole.error( [vuex] module namespace not found in ${thelper}(): $tnamespace} -) 


return modu1le 


我 们 在 Vuex 初始 化 执行 installModule 的 过 程 中 ， 初 始 化 了 这 个 映射 表 : 


functionuanstallModuule (store nootstate， ipath， module， hnot)i Tt 
ZE 


const namespace = store._modules.getNamespace(path ) 


// register in namespace map 
If (module.namespaced) 攻 
store._modulesNamespaceMap[namespace] = module 
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mapGetters 


我 们 先 来 看 一 下 _mapGetters 的 用 法 : 
Import { mapGetters } from 'Vuex' 


export default 1{ 
/人 
Computed : 荆 
// 使 用 对 象 展 开 运算 符 将 getter 混入 computed 对 象 中 
mapGetters([ 


"doneTodoscCount ` ， 
"anotherGetter ' ， 
0 


]) 


和 mapstate 类 似 ， mapGetters 是 将 store 中 的 getter 映射 到 局 部 计算 属性 ， 来 看 一 下 它 的 
定义 : 


export const mapGetters = normalizeNamespace((namespace，getters) => { 
const res = 人 
normalizeMap(getters).forEach(({ key，Vval }) => { 
// thie namespace has been mutate by normalLizeNamespace 
Vval = namespace + Val 
res[key] = function mappedGetter () 攻 
If (namespace && !getModuJeByNamespace(this.$store， 'mapGetters ' ，namespace) ) 


{ 
[Scan 
If (process.env.NODE_ENV !== ' production'”&& !(val in this.$store.getters)) 攻 
console,error( [vuex] unknown getter: $tval} ) 
EeEunn 
return this,.$store,getters[val] 


】} 


// mark Vvuex getter for devtools 
res[key].vuex = true 


}) 


return res 


}) 


mapGetters 也 同样 支持 namespace ， 如 果 不 写 namespace ， 访 问 一 个 子 module 的 属性 需 
写 很 长 的 key ， 一 有 旦 我 们 使 用 了 namespace ， 就 可 以 方便 我 们 的 书写 ， 每 个 _mappedGetter 的 实 
现实 际 上 就 是 取 this.$store.getters[val] 。 


时 


mapMutatIons 


我 们 可 以 在 组 件 中 使 用 this.$store.commit('xxx') 提交 mutation ， 或 者 使 用 mapMutations 
辅助 画 数 将 组 件 中 的 methods 映射 为 store.commit 的 调用 。 


我 们 先 来 看 一 下 _mapMutations 的 用 法 : 
Import { mapMutations } from "Vuex' 


export default 1{ 
0 
methods: 攻 
,. .mapMutations([ 
'increment'!，V// 将 this.increment() ”映射 为 “this.$store,.commit('increment') 


// mapMutations ”也 支持 载荷 : 
'incrementBy' // 将 this.incrementBy(amount) ”了 映射 为 “this.$store,commit('inc 
rementBy '，amount ) 
])， 
,mapMutations({ 
add: 'increment' // 将 this.add() ”映射 为 “this.$store.commit('increment') 


了 ) 


mapMutations 文 持 传人 一 个 数组 或 者 一 个 对 象 ， 目标 都 是 组 件 中 对 应 的 methods 映射 为 
store.commit 的 调用 。 来 看 一 下 它 的 定义 : 


export const mapMutations = normalizeNamespace((namespace，mutations) => { 
const res = 1 
normalizeMap(mutations ) .forEach(({ key，Vval }) => { 
res[key] = function mappedMutation (..,args) 攻 
X/A Get the commit method from store 
Jet commit = this.$store.commit 
If (namespace) 区 
const module = getModuleByNamespace(this.$store， 'mapMutations' ，namespace) 
if (!module) { 


return 
】 
commit = module.context.commit 
】 
return typeof val === "function' 


? val,apply(this，[commit].concat(args) ) 
: Commit .apply(this.$store，[val].concat(args ) ) 


}) 


return res 


}) 


可 以 看 到 mappedMutation 同样 支持 了 _ namespace ， 并 且 文 持 了 传人 额外 的 参数 args ， 作 为 提 
交 mutation 的 payload ， 最 终 就 是 执行 了 _ store,.commit 方法 ， 并 且 这 个 commit 会 根据 传人 
的 namespace 有 瞻 射 到 对 应 module 的 commit 上 。 


mapActIions 


我 们 可 以 在 组 件 中 使 用 this,$store,dispatch('xxx') 提交 action ， 或 者 使 用 mapActions 辅 
助 函 数 将 组 件 中 的 methods 映射 为 store.dispatch 的 调用 。 


mapActions 在 用 法 上 和 mapMutations 几乎 一 样 ， 实现 也 很 类 似 : 


export const mapActions = normalizeNamespace((namespace，actions) => 
const res = 1{} 
normalizeMap(actions) .forEach(({t key，Vval }) => 二 
res[key] = function mappedAction (.. .args) 革 
// get dispatch function from store 
let dispatch = this.$store.dispatch 
If (namespace) 荆 
const module = getModuJleByNamespace(this.$store， 'mapActions' ，namespace) 
If (!module) 区 


etunn 
} 
dispatch = module.context ,dispatch 
} 
return typeof val === 'function' 


? val.apply(this，[dispatch].concat(args) ) 
: dispatch.apply(this.$store，[val].concat(args ) ) 


了 ) 


retunrn res 


}) 


和 mapMutations 的 实现 几乎 一 样 ， 不 同 的 是 把 commit 方法 换 成 了 dispatch 。 


动态 更 新 模块 


在 Vuex 初始 化 阶段 我 们 构造 了 模块 树 ， 初 始 化 了 模块 上 各 个 部 分 。 在 有 一 些 场景 下 ， 我 们 需要 动态 去 
注入 一 些 新 的 模块 ， Vuex 提供 了 模块 动态 注册 功能 ， 在 _ store 上 提供 了 一 个 registerModu]e 的 
API。 


registerModule (path，rawModule，options = {) 攻 
If (typeof path === ' String') path = [path] 


If (process,env.NODE_ENV !== "production') 攻 
assert(Array,.IsArray(path)， module path must be a string or an Array，) 
assert(path,Jlength > 0， "cannot register the root module by using registerModuJ] 
ea ) 


j 


this,_ modules.register(path，rawModujle) 


InstalJModuJle(this，this,state，path，this.,_ modules.get(path)，options.preservesSt 
ate ) 


// reset Store to update getters.，. 
resetStorevM(this，this,state) 


registerModule 支 持 传人 一 个 _path 模块 路 径 和 rawModule 模块 定义 ， 首 先 执行 register 
方法 扩展 我 们 的 模块 树 ， 接 着 执行 instaLlLIModule 去 安装 模块 ， 最 后 执行 resetSstorevM 重新 实 
例 化 Store._Vvm ， 并 销毁 旧 的 Store_vm o。 


相对 的 ， 有 动态 注册 模块 的 需求 就 有 动态 仓 载 模块 的 需求 ，Vuex 提供 了 模块 动态 和 印 载 功 能 ， 在 
store 上 提供 了 一 个 unregisterModule 的 API。 


unregisterModule (path) 攻 
if (typeof path === "String') path = [path] 


If (process.env.NODE_ENV !== "production' ) { 
assert(Array.IsArray(path)， module path must be a String or an Array, ) 


this, modules,.unregister(path) 

thizs,_ withCcommit(() => 并 
const parentState = getNestedState(this.state，path.slice(0，-1)) 
VvVue.delete(parentState，path[path.Jlength - 1]) 

]) 


resetStore(this ) 


unregisterModule 支持 传人 一 个 _path 模块 路 径 ， 首 先 执行 unregister 方法 去 修剪 我 们 的 模块 
树 : 


unregister (path) 1{ 
const parent = this.get(path.slice(0，-1)) 
const key = path[path.length - 了 I] 
If (!parent.getChild(key).runtime) return 


parent .removeCchild(key) 


一 


注意 ， 这 里 只 会 移 除 我 们 运行 时 动态 创建 的 模块 。 


接着 会 删除 state 在 该 路 径 下 的 引用 ， 最 后 执行 resetstore 方法 : 


functiomuiresetstoelstorehnot) 焉 人 
store._actions = 0bject.create(nu]]) 
Store._mutations = 0bject.create(nul1l) 
Store._ wrappedGetters = 0bject,create(nul1l) 
store._modulesNamespaceMap = 0bject.create(nul1l) 
const State = Store.state 
ZnaEEamocdules 
InstalJModuJje(store，state，[]，store._modules.root，true) 
/Tesekevr 
resetStorevM(Sstore，Sstate，hot ) 


该 方法 就 是 把 store 下 的 对 应 存储 的 _actions 、 _mutations 、 _wrappedGetters 和 
_modulesNamespaceMap 都 清空 ， 然 后 重新 执行 instaLllModule 安装 所 有 模块 以 及 
resetStorevM 重 置 store._vm 。 

总 结 

那么 至 此 ，Vuex 提供 的 一 些 常 用 API 我 们 就 分 析 完 了 ， 包 括 数据 的 存 取 、 语 法 糖 、 模 块 的 动态 更 新 

等 。 要 理解 Vuex 提供 这 些 API 都 是 方便 我 们 在 对 _ store 做 各 种 操作 来 完成 各 种 能 力 ， 尤 其 是 
mapXxx 的 设计 ， 让 我 们 在 使 用 API 的 时 候 更 加 方便 ， 这 也 是 我 们 今后 在 设计 一 些 JavaScript 库 的 时 

候 ， 从 API 设计 角度 中 应 该 学 习 的 方向 。 


插件 


Vuex 除了 提供 的 存 取 能 力 ， 还 提供 了 一 种 插件 能 力 ， 让 我 们 可 以 监控 store 的 变化 过 程 来 做 一 些 事 


,得 
月 o 


Vuex 的 store 接受 plugins 选项 ， 我 们 在 实例 化 _ store 的 时 候 可 以 传人 播 件 ， 它 是 一 个 数组 ， 
然后 在 执行 Store 构造 画 数 的 时 候 ， 会 执行 这 些 插件 : 


const 1{ 
pJlugins = []， 
strict = false 
} = options 
// apply plLugins 
plugins.forEach(pJLugin => plugin(this )) 


在 我 们 实际 项 目 中 ， 我 们 用 到 的 最 多 的 就 是 Vuex 内 置 的 Logger 插件 ， 它 能 够 帮 有 我 们 追踪 state 
变化 ， 然 后 输出 一 些 格式 化 日 志 。 下 面 我 们 就 来 分 析 这 个 插件 的 实现 。 


Logger 插件 
Logger 插件 的 定义 在 Src/plugins/Llogger .js 中 : 


exponmtidefaultifunmctonicreateooggera( 必 
Collapsed = true， 
filter = (mutatiIon，stateBefore，stateAfter) => truey 
transformer = State => State， 
mutationTransformer = mut => mut， 
1ogger = console 
Ja 
return Store => 区 
Jet prevState = deepCcopy(Sstore.Sstate) 


Store.Subscribe((mutation，state) => 革 
if (typeof logger === ' undefined ' ) 攻 
eeumn 


const nextState = deepCopy(Sstate) 


If (filter(mutation，prevState，nextState)) 区 
const time = new Date() 
const formattedTime = ”  @ $ftpad(time.getHours()，2)}:$tpad(time.getMinutes( 
JE2)IsUpadkcnnesgekseconds(D 2)RtpadktanmesgetNoaaseconds 人才 is)， 
const formattedMutation = mutationTransformer(mutation) 
const message = mutation $ftmutation,type}${ftformattedTime}- 
const StartMessage = colJlapsed 
? logger .groupCcollapsed 


: 1ogger ,group 


// render 


相 WY 省 必 
startMessage.callL(1ogger，message) 


Tcatchn (e) 
console.1og(message) 


ogger ,1og( '%c prev state'， 'color: #9E9E9E， font-weight: bold'，transforme 
r(prevState) ) 

Jogger .1og('%c mutation'， "color: #03A9F4; font-weight: bold'，TformattedMut 
ation) 

ogger ,1og( '%c next State'， 'color: #4CAF50) font-weight: bold'，transforme 
r(nextState)) 


ay 和 
1ogger .groupEnd () 
Tcatcn Ce) tt 
1o0gger ,10og( ' 一 1og end 一 ') 


prevState = nextState 


了]) 


huUnmectionarepeatCstr tcImesy 
return (new Array(times + 1)), join(str) 


function pad (num，maxLength) 1{ 
return repeat('0'，maxLength - num.toString().1Length) + num 


插件 函数 接收 的 参数 是 _ store 实例 ， 它 执行 了 store.subscribe 方法 ， 先 来 看 一 下 _ subscribe 
的 定义 : 


Subscribe (fn) 革 
return genericSubscribe(fn，thlis,._ subscribers) 


fuUTmCtionEgenecsupscrbekGnnasubsh) 匡 不 
If (Subs.indexof(fn) < 90) 攻 
Subs.push(fn) 
】} 
return () => 
const 工 = Subs.indexof(fn) 
下 全 人 下 二 下 了) 天 人 


Subs.Splice(I， 工 ) 
】} 
} 
】} 


subscribe 的 逻辑 很 简单 ， 就 是 往 this, subscribers 去 添加 一 个 函数 ， 并 返回 一 个 
unsubscribe 的 方法 。 


而 我 们 在 执行 store.commit 的 方法 的 时 候 ， 会 表 历 this, ”执行 它们 对 应 的 回调 画 数 : 


Commit (_type，_payload，_options) { 
Const 人 
type， 
pay1Load， 
options 
} = unifyobjectStyle(_type，_payJload，_options ) 


const mutation = { type，payload } 
AAA 和 人 
this,_Ssubscribers.forEach(Sub => Sub(mutation，this,state)) 


回 到 我 们 的 Logger 数 ， 它 相当 于 订阅 了 _ mutation 的 提交 ， 它 的 prevSstate 表示 之 前 的 
state ， nextState 表示 提交 mutation 后 的 state ， 这 两 个 state 都 需要 执行 deepcopy 


方法 拷贝 一 份 对 象 的 副本 ， 这 样 对 他 们 的 修改 就 不 会 影响 原始 store.state 。 


接 下 来 就 构造 一 些 格式 化 的 消息 ， 打 印 出 一 些 时 间 消 息 message ， 之 前 的 状态 prevState ， 对 应 
的 mutation 操作 formattedMutation 以 及 下 一 个 状态 _ nextState 。 


最 后 更 新 prevState = nextState ， 为 下 一 次 提交 mutation 输出 日 志 做 准备 。 


那么 至 此 Vuex 的 插件 分 析 就 结束 了 ，Vuex 从 设计 上 支持 了 插件 ， 让 我 们 很 好 地 从 外 部 追踪 store 
内 部 的 变化 ， Logger 插件 在 我 们 的 开发 阶段 也 提供 了 很 好 地 指引 作用 。 当 然 我 们 也 可 以 自己 去 实现 
vuex 的 插件 ， 来 帮助 我 们 实现 一 些 特定 的 需求 。 


